Flexboxの縦並びを使って２カラムデザイン

下記のように２カラムのデザインを考える時

通常は、左右２つの領域に区切ってから

さらに右の領域の中に新たに上下に区切るように領域を作る、という風にするわけですが。

これを、Flexboxのflex-directionを縦並びにすることでできないか考えてみた。 　　・ 　　・ 　　・ できた。

必要ないかも知れませんが解説

通常無指定であれば、Flexboxは横並び(flex-direction:row;)で、横幅が限界になったときに下に折り返される。(折り返す設定の場合)

flex-direction:column; にすると縦並びになる

縦方向の高さが限界を迎えた時に右方向に折り返される。 なので、全体の高さを指定して制限してやると・・・

※領域を増やすと当然、右方向に折り返されていく事になる

なので、領域の幅と高さ、各領域の大きさと数が固定のレイアウトの場合でないと使えないですね。(overflow:hidden;も必要) あまり使う機会はなさそうですが、OGPとかバナー等のレイアウト的には使えるかも？