如何使用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>