flex-boxの組み方

HTMLとCSSで画像のようなレイアウトを作成するにはどうすればよいのでしょうか？
画像の3つの要素をひと固まりとして、ウィンドウサイズを変えた時に位置関係がずれてしまわないようするためです。
した二つの画像を並べるのはflex-boxを使用し、justify-contentでcenterを指定することで真中への配置はできたのですが、画像のような2段構成にする方法がわかりませんでした。
下記コードは現在の状態です。

<style>
.flex_test-box {
  display: flex;
  justify-content: center;
  padding: 10px;
  /* 余白指定 */
}

.flex_test-item {
  padding: 10px;
  margin: 20px 4.5%;
}
</style>
<div class="flex_test-box">
	<div class="flex_test-item">
		<img src="http:xxxxxxxxxxxx.jpg">
	</div>
    <div class="flex_test-item">
		<img src="http:xxxxxxxxxxxx.jpg">
    </div>
</div>
```![イメージ説明](5f9483c1a14ad5dc89669257eafe724c.png)

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

回答1件

ベストアンサー

Flexboxを使った一例です。Gridを使ってもできますね。

html
1<div class="flex_test-box">
2  <div class="flex-item-text">テキスト</div>
3  <div class="flex-item-img">
4    <img src="https://placehold.jp/300x300.png?text=画像">
5  </div>
6  <div class="flex-item-img">
7    <img src="https://placehold.jp/300x300.png?text=画像">
8  </div>
9</div>

css
1.flex_test-box {
2  display: flex;
3  flex-wrap: wrap; /* 折り返し許可 */
4  justify-content: space-between;
5  max-width: 700px; /* 最大幅を設定 値はお好みで */
6  margin: 0 auto; /* 左右中央配置 */
7}
8.flex_test-box > div {
9  border: 2px solid;
10}
11.flex-item-text {
12  width: 100%;
13  text-align: center;
14}
15.flex-item-img {
16  width: 45%;
17  margin: 20px 0;
18}
19.flex-item-img > img {
20  display: block;
21  width: 100%;
22}