如何使用CSS进行布局，其中的图像是在两列之间添加的，每次列中有四个图像时，它就会切换。

Question

该页面目前适合水平方向的四个图像，如果在这个方向上添加了更多的图像，则可以滚动以查看它们。无论页面上有多少其他图像，图像也应该保持相同的大小。

html设置如下：

​

<div className="wrapper">
    <img className="item" />
    <img className="item" />
    <img className="item" />
    <img className="item" />
    .
    .
    .
</div>

​

页面的预期行为是按所写数字的顺序动态添加到页面中的。

三幅图片：

1 2 3

[]

五个图像：(注意:屏幕现在在水平方向被填充到最大值)：

1 2 3 4

5

九幅图片：

1 2 3 4 9

5 6 7 8

13幅图片：

1 2 3 4 9 10 11 12

5 6 7 8 13

修复三张和五张图像并不是一个问题，但是当试图实现对九幅图像的预期行为时，它开始变得很难.会感谢所有的帮助。我最好不想改变html，除非它使它更容易修复。

Answer 1

这是可能的，只有当你把你的图像包装成四组。如果您这样做，CSS Flexbox可以完成剩下的工作。

​

body {
  margin: 0;
}

.wrapper {
  height: 120px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.group {
  width: 400px;
  display: flex;
}

.item {
  width: 100px;
  height: 60px;
  background: linear-gradient(45deg, #eee, #bbb);
}

<div class="wrapper">
  <div class="group">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="group">
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
  <div class="group">
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
  </div>
  <div class="group">
    <div class="item">13</div>
  </div>
</div>

​