フレキシボックスのレイアウト - 私は次のようholygrailのようなレイアウトを作りたいJS

Question

せずに列を共有：

：小さな画面で以下に変わります

JSのハックがなくても、CSSの方法はありますか？

Answer 1

あなたはフレキシボックスでそれを行うことができます（あなたが親に一定の高さを設定した場合、例えば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>