Flexbox的布局 - 没有JS

Question

共享专栏中，我想打一个holygrail般的布局如下：

将变成一个小屏幕上显示如下：

有没有CSS的方式来做到这一点，没有JS黑客？

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>