如何修复Flexbox居中？

Question

在下面的代码中，.rows 没有放置在中心，尽管放置在 .wrapper {display:flex;对齐项目：居中；调整内容：中心}。此外，第三行不会换行到下一行。间隙：20px；也不工作。我正在尝试为前 4 张图像制作居中 2 列 2 行布局，为第 1 张图像制作 1 行布局。

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 940px;
  gap: 20px;
}

.column {
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  gap: 20px;
}

<div class="wrapper">
  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/26a76fb4-c0c9-1296-36dd-a0adcfd0da11.jpg" width="452px" height="300px"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/2bdc1eb0-300a-9f18-273a-1939c3a1a20a.jpg" width="452px" height="300px"></div>
  </div>

  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/db72e41d-c338-08d3-d0ee-782dd31791d6.jpg" width="452px" height="300px"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/74b818c5-f67c-540f-c724-b6a71fcad0db.jpg" width="452px" height="300px"></div>
  </div>
  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/ce6173d9-ed33-0d23-bed7-ce1fa03db6b6.jpg" width="923px" height="518px">
    </div>
  </div>
</div>

Answer 1

基本上我将

flex-wrap: wrap;

和

gap

移至

.wrapper

因为你确实希望它换行。

我还添加了

width: 100%

到

img

以使其响应。

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  flex-wrap: wrap;
  gap: 20px;

}

.row {
  display: flex;
  flex-direction: row;
  width: 940px;
  gap: 20px;
}

.column {
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  gap: 20px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<div class="wrapper">
  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/26a76fb4-c0c9-1296-36dd-a0adcfd0da11.jpg" width="452px" height="300px"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/2bdc1eb0-300a-9f18-273a-1939c3a1a20a.jpg" width="452px" height="300px"></div>
  </div>

  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/db72e41d-c338-08d3-d0ee-782dd31791d6.jpg" width="452px" height="300px"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/74b818c5-f67c-540f-c724-b6a71fcad0db.jpg" width="452px" height="300px"></div>
  </div>
  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/ce6173d9-ed33-0d23-bed7-ce1fa03db6b6.jpg" width="923px" height="518px">
    </div>
  </div>
</div>

Answer 2

创建一个两列两行的布局来显示前四张图像。对于最后一个图像，将其显示在单行中。保持 CSS 简单。这是一个简单的例子：

.wrapper {
  display: flex;
  flex-direction: column;
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
  gap: 10px;

}

.row {
  display: flex;
  gap: 10px;
}

img {
  max-width: 100%;
}

<div class="wrapper">
  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/26a76fb4-c0c9-1296-36dd-a0adcfd0da11.jpg" width="452px" height="300px"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/2bdc1eb0-300a-9f18-273a-1939c3a1a20a.jpg" width="452px" height="300px"></div>
  </div>

  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/db72e41d-c338-08d3-d0ee-782dd31791d6.jpg" width="452px" height="300px"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/74b818c5-f67c-540f-c724-b6a71fcad0db.jpg" width="452px" height="300px"></div>
  </div>
  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/ce6173d9-ed33-0d23-bed7-ce1fa03db6b6.jpg" width="923px" height="518px">
    </div>
  </div>
</div>