display: flex設定での並べ方 flex-wrap

Question

### display: flexの使い方について質問です。図のように左側に大きな画像（メインテーマ）を貼り、右側に正方形のようにAに関連する画像例（B～E)を貼っていきたいと思っております。

<section class="theme">
    <div class="container">
        <div class="theme_left">
            <img src="img/theme_a.png">
        </div>
        <div class="theme_right">
            <div class="theme_expics">
                <img src="img/theme_b.png">
                <img src="img/theme_c.png">
                <img src="img/theme_d.png">
                <img src="img/theme_e.png">
            </div>
        </div>
    </div>
</section>

しかし旨いことに正方形のような並びを得ることができません。
調べた結果、display: flex を親要素に設定して、子要素にflex-wrap: wrapにすると折り返しをしてくれるそうです。

直下の要素が並列になるのがdisplay: flexであれば、

<div class="container"> と <div class="theme_right"> にdisplay: flexと設定し、 <div class="theme_expics"> にはflex-wrap: wrapと設定すればよいのでは、と思いましたが上手くいかず、B~Eが横に配置されてしまいます。 皆様の御知恵を拝借できれば幸いでございます。

Answer 1

そのHTML構造なら、.theme_expicsにdisplay: flexを設定することになります。

各要素のサイズが不明ですが、とりあえず下記のような感じで図のようなレイアウトになります。

.container {
  display: flex;
}
.theme_left, .theme_right {
  width: 50%;
}
.theme_expics {
  display: flex;
  flex-wrap: wrap;  
}
.theme_expics > img {
  width: 50%;
}

Comments

[TTwebCE]

とても助かりました。ありがとうございます。
すいません質問が1つ抜けていました。上記の際、間に文章を入れたいときの設定はどうしたらよいでしょうか。

<img src="img/theme_b.png">
<p>あああああああああ</p>

このようにしたいのですが、<p>のコメントが画像の下ではなく、画像の右側に出てしまいます。
画像サイズを小さくすれば良いかなとも思いましたが、上手くいかず。

<img src="img/theme_b.png">
<p>ああああああああああああ</p>
<img src="img/theme_c.png">
<p>ああああああああああああ</p>
<img src="img/theme_d.png">
<p>ああああああああああああ</p>
<img src="img/theme_e.png">
<p>ああああああああああああ</p>

文字を下に入れる分全体のcontainerの高さを超えてしまうのが理由でしょうか。だとしたらheightを調整すれば良いということでしょうか。追加になってしまい申し訳ありません。

[hatena19]

質問は編集できるので、質問をそのテキスト入りのコードに修正してください。
手書きの図もテキスト入りのものに修正してください。

コメントのそのHTMLのままでいくなら、display: grid; を使うことになるでしょう。

[TTwebCE]

ご丁寧に皆さまありがとうございました。ルールに関しましては承知いたしました。今後ともよろしくお願いいたします。