Question

我有一个简单的 flex 容器。例如：

.container {
  display: flex;
  flex-wrap: wrap;
  outline: dashed red;
  width: 300px;
}

.container > div {
  width: 100px;
  display: flex;
}

.container > div:nth-child(even) { 
  background-color: yellow; 
} 

.container > div:nth-child(odd) { 
  background-color: cyan; 
}

<div class="container">
  <div>Item1</div>
  <div>Item2</div>
  <div>Item3</div>
  <div>Item4</div>
  <div>Item5</div>
  <div>Item6</div>
  <div>Item7</div>
  <div>Item8</div>
  <div>Item9</div>
  <div>Item10</div>
</div>

使用此特定示例的行宽，默认情况下 flex 会导致第一行包含项目 1、2 和 3，而最后一行仅包含 10。但我想要相反的内容，如下所示：

如果我使用 wrap-reverse，行为看起来很接近我想要的东西：

问题在于它只是移动行，而不是其中的项目。注意 1 不再是最后一个，因此倒车不是一种选择。例如，如果我结合 wrap-reverse 并使用 order 样式来反转我的订单项目，它最终是：

如果我不使用 wrap-reverse，项目总是被分组/聚集到前面。

理想情况下，我不需要按特定顺序手动装饰项目。项目列表是动态的，来自 CMS，我真的不了解从我的组件添加的项目。

有什么方法可以完成我正在寻找的布局行为吗？

---- 编辑 -----

对不起，我遗漏了细节。我在这里仅使用宽度来说明 flex 如何排列项目。实际上，容器和项目的大小都可能发生变化，因此我不能依赖于固定宽度或列数。此外，我不知道项目的总数，因为它们来自 CMS。

Answer 1

让元素的动态列表按其源顺序流动，但从最后一行的最后一列开始填充行是一项任务，我认为 CSS 还不够先进，无法完成。至少不是没有对 CSS 和 HTML 的严重攻击。

在我看来，您最好的选择是保持 HTML 和 CSS 原样（看起来干净且不错）并添加一个脚本来完成布局。

位置包裹的弹性项目更喜欢在容器的末尾分组/束

1 个答案: