Flex boxの縦1：2レイアウト

現在webサイトのナビゲーション部分を作成している初心者です。
図のように左側に画像を置き、右側を上下二分割するレイアウトを考えています。
できればFlex boxで実現したいのですが、可能でしょうか？
調べても幅に関しては2：1などの作成例がでてくるのですが、高さに関してはあまり例が見つかりません。また親コンテナでは並び方の制御はできますが、任意の子コンテナから並びを変えることはできないように思えました。
もし解決作がありましたら、何卒ご教示下さい。

行動規範の内容に同意します

回答1件

ベストアンサー

flexboxは子要素にしか効かないため、右2つをdivで括って孫要素にすることで縦に並びます。

HTML
1<div class="wrap">
2    <div class="hoge">
3        あああ
4    </div>
5    <div class="wrap2">
6        <div class="foo">
7            いいい
8        </div>
9        <div class="bar">
10            ううう
11        </div>
12    </div>    
13</div>

CSS
1.wrap {
2    display: flex;
3}
4.hoge {
5    background-color: #f00; 
6}
7.foo {
8    background-color: #70AD47;
9}
10.bar {
11    background-color: #00B0F0;
12}

https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction

投稿2021/02/22 09:57

編集2021/02/24 00:45

mai1210

総合スコア272

hiromint

2021/02/22 12:22

回答ありがとうございました。なるほど、大括りのdivがrowになって、さらに入れ子で括ってそっちはcolumnにすればいいんですね。ありがとうございました！

takna

2021/02/23 01:20

Flexbox は子要素にしか効かないので、`.wrap2 { flex-direction: column; }`が無くても同じ結果となりますよ。HTML の `<div class="wrap2"></div>` は必要です。スマホで一列表示にしたいなら、.wrap にメディアクエリで flex-direction: column; を指定してあげると良いです。