html - 使用 CSS flexbox 制作一个四方形的照片库

Question

所以我对编程很陌生。我知道有关于 flexbox 的教程和了解 flex 的大量资源，但在理解如何使用 flexbox 限制单列中所需的照片数量方面，没有一个是直接的。下面我正在制作一张 4 方形的冲浪鳍照片，仅供练习。但似乎我在一条线上得到 3 张照片，而不是 2 和 2。
我希望它看起来像这样:
但它看起来像这样:

我知道没有直接说明这样做的代码，但这是我没有 FLEX 的代码和 html:

    <div class="galary">
      <img src="./row-1-col-1.png" style="max-width: 350px; height: auto;" />
      <img src="./row-1-col-2.png" style="max-width: 350px; height: auto;" />
      <img src="./row-2-col-1.png" style="max-width: 350px; height: auto;" />
      <img src="./row-2-col-2.png" style="max-width: 350px; height: auto;" />
    </div>
  </body>

.galary {
  margin-top: 5vh;
  width: 100vw;
  text-align: center;
  background: #e8e8e8;
  padding: 2rem 0rem;
}

Answer 1

我建议您使用网格框而不是 flexbox ，因为网格框可以轻松地将内容对齐到列和行中，这是网格框的示例

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  width: 60%;
  height: 400px;
  background: darkcyan;
}

.img {
  width: 100%;
  height: 100%;
  border: 1px solid red;
}

.i2 {
  grid-column: 2/3;
}

.i3 {
  grid-column: 1/2;
  grid-row: 2/3;
}

.i4 {
  grid-column: 2/3;
  grid-row: 2/3;
}

<div class="container">
  <div class="img i1"><img src="x.jpg"></div>
  <div class="img i2"><img src="x.jpg"></div>
  <div class="img i3"><img src="x.jpg"></div>
  <div class="img i4"><img src="x.jpg"></div>
</div>