인 flexbox 레이아웃 - 나는 다음과 같은 holygrail 같은 레이아웃을 만들고 싶어 JS

Question

없이 열을 공유 :

다음 작은 화면에서 다음으로 켜집니다

JS 해킹이 없으면 CSS 방법이 있습니까?

Answer 1

당신은 인 flexbox 함께 할 수있는 (상위에 고정 된 높이를 설정 한 경우, 예를 들어 100vh)하지만,이 경우에 그 일의 선호하는 방법은 그리드 함께 :

* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100%} 
 

 
#container { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; /* makes two columns, can also use 50% 50%, repeat(2, 1fr) or repeat(2, 50%), fr stands for fractions */ 
 
    grid-auto-rows: 150px; /* adjust or don't use at all, not mandatory */ 
 
    grid-gap: 5px 0; /* adjust, atm. 5px vertical gap, 0px horizontal */ 
 
    color: #fff; 
 
    font-size: 4em; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
#container > div:nth-child(2) { /* can also use :nth-of-type(2) */ 
 
    grid-column: 1; /* puts the blue one in the left column */ 
 
    grid-row: 1/3; /* span two rows */ 
 
} 
 

 
@media screen and (max-width: 568px) { /* adjust */ 
 
    #container { 
 
    grid-template-columns: 1fr; /* makes one column, can also use 100% */ 
 
    grid-gap: 0; 
 
    } 
 
    #container > div:nth-child(2) { 
 
    grid-row: 2; /* puts it back where it belongs */ 
 
    } 
 
}

<div id="container"> 
 
    <div style="background: green">1</div> 
 
    <div style="background: blue">2</div> 
 
    <div style="background: red">3</div> 
 
</div>

대안에 관해서는, 당신은 위치의 이점을 취할 수 있습니다

* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100vw;height:100vh} /* viewport units */ 
 

 
#container { 
 
    position: relative; /* needs to be on the parent */ 
 
    height: 100%; 
 
    color: #fff; 
 
    font-size: 4em; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
#container > div { 
 
    position: absolute; /* needs to be on the children */ 
 
} 
 

 
#container > div:first-child { 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 147.5px; /* -2.5px for the vertical gap */ 
 
} 
 

 
#container > div:nth-child(2) { 
 
    top: 0; 
 
    left: 0; 
 
    width: 50%; 
 
    height: 300px; 
 
} 
 

 
#container > div:nth-child(3) { /* can also use the :last-child */ 
 
    top: 152.5px; /* height of the :first-child + 5px */ 
 
    right: 0; 
 
    width: 50%; 
 
    height: 147.5px; /* -2.5px for the vertical gap */ 
 
} 
 

 
@media screen and (max-width: 568px) { 
 
    #container > div {position:static} 
 
    #container > div:first-child, 
 
    #container > div:nth-child(2), 
 
    #container > div:nth-child(3) { 
 
    width: 100%; 
 
    height: 150px; 
 
    } 
 
}

<div id="container"> 
 
    <div style="background: green">1</div> 
 
    <div style="background: blue">2</div> 
 
    <div style="background: red">3</div> 
 
</div>