Question

有没有办法创建一个没有空格的布局，其中大多数项目的尺寸相同，但有些是高度的2倍？我可以使用以下CSS制作类似于我想要的东西：

父：

display: flex;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
flex-wrap: wrap;

儿童：

width: 22%
height: 100px;

高个子有height: 200px。它看起来像这样：

它非常接近，但问题是我需要一个从左到右的顺序，而不是从上到下，所以我不能使用flex-direction: column。如果我对flex-direction: row执行相同操作，则不起作用：

有什么想法吗？

Answer 1

根据您的整体情况，您可以使用order属性。

CSS order属性指定用于在其Flex容器中布置弹性项目的顺序。

这是一个基本的弹性箱，其中包含column对齐的20个弹性项目。

编号是垂直的，就像在第一张图片中一样。

使用order，您可以重新排列布局，而无需更改HTML或flex-direction。

项目按列堆叠，但order属性会覆盖其自然定位并将其重新排列为行，就像在第二张图片中一样。

然后，如果你将一些项目的大小加倍，你只需要计算出正确排序的数学（因为每个项目现在将占用两个空格）。

请注意，项目之间没有额外的垂直间距。

默认情况下，所有弹性项目都设置为order: 0。允许使用负值（即order: -3）。