使用 flexbox 时如何让图像保留在特定行上？

Question

我正在尝试执行此响应式图像网格 (https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp)，但我不是在一行上有四列，而是有三列，第四列跳到下一行。见图片：3 columns instead of 4

在调整窗口大小时，我有一个，而不是在一行上有 2 列。见图片：1 column instead of 2

可能是什么问题？

<div class="row">
  <div class="column">
    <img src="./japan1.jpg" alt="">
    <img src="./japan2.jpg" alt="">
    <img src="./japan3.jpg" alt="">
  </div>
  <div class="column">
    <img src="./japan1.jpg" alt="">
    <img src="./japan3.jpg" alt="">
    <img src="./japan2.jpg" alt="">
  </div>
  <div class="column">
    <img src="./japan3.jpg" alt="">
    <img src="./japan2.jpg" alt="">
    <img src="./japan1.jpg" alt="">
  </div>
  <div class="column">
    <img src="./japan2.jpg" alt="">
    <img src="./japan3.jpg" alt="">
    <img src="./japan1.jpg" alt="">
  </div>
</div>

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

Answer 1

试试：

.row {
width: 100%;
  display: flex;
  flex-wrap: wrap
  padding: 0 4px;
}

.column{
  width: 25%;
  padding: 0 4px;

}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

@media screen and (max-width: 800px) {
  .column {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}