css - 使用 CSS flexbox 将孤立元素放置在顶部/开始的有效方法

Question

当您使用 flexbox wrap 创建网格并且最后一行的元素少于前几行时，带有 flex: 1 的“孤立”元素的默认行为是水平拉伸(stretch)以填充宽度 - 使元素大于前几行。除了我希望较大的元素出现在顶行而不是底行之外，我想要相同的行为。

我想出了一个解决方案(如下所示)，但它的扩展性不佳，感觉像是一个糟糕的 hack。有没有更好(更优雅)的方式来实现这种布局？该解决方案需要处理动态内容；即，我事先不知道元素的数量，我需要保持源顺序。

它应该是这样的:

ul#subcategory_list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
}

ul#subcategory_list li:nth-child(1) {order: 30}
ul#subcategory_list li:nth-child(2) {order: 29}
ul#subcategory_list li:nth-child(3) {order: 28}
ul#subcategory_list li:nth-child(4) {order: 27}
ul#subcategory_list li:nth-child(5) {order: 26}
ul#subcategory_list li:nth-child(6) {order: 25}
ul#subcategory_list li:nth-child(7) {order: 24}
ul#subcategory_list li:nth-child(8) {order: 23}
ul#subcategory_list li:nth-child(9) {order: 22}
ul#subcategory_list li:nth-child(10) {order: 21}
ul#subcategory_list li:nth-child(11) {order: 20}
ul#subcategory_list li:nth-child(12) {order: 19}
ul#subcategory_list li:nth-child(13) {order: 18}
ul#subcategory_list li:nth-child(14) {order: 17}
ul#subcategory_list li:nth-child(15) {order: 16}
ul#subcategory_list li:nth-child(16) {order: 15}
ul#subcategory_list li:nth-child(17) {order: 14}
ul#subcategory_list li:nth-child(18) {order: 13}
ul#subcategory_list li:nth-child(19) {order: 12}
ul#subcategory_list li:nth-child(20) {order: 11}
ul#subcategory_list li:nth-child(21) {order: 10}
ul#subcategory_list li:nth-child(22) {order: 9}
ul#subcategory_list li:nth-child(23) {order: 8}
ul#subcategory_list li:nth-child(24) {order: 7}
ul#subcategory_list li:nth-child(25) {order: 6}
ul#subcategory_list li:nth-child(26) {order: 5}
ul#subcategory_list li:nth-child(27) {order: 4}
ul#subcategory_list li:nth-child(28) {order: 3}
ul#subcategory_list li:nth-child(29) {order: 2}
ul#subcategory_list li:nth-child(30) {order: 1}

Answer 1

假设您想摆脱 nth-child CSS 规则列表，没有 1-liner 可以做到这一点。

如果您动态生成元素，则可以内联添加 order 属性，如果您事先不知道有多少元素，则可以从一个绝对不会超过的值开始, 即 1000 然后向下。

堆栈片段

ul#subcategory_list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
}

ul#subcategory_list li {
  flex: 1 1 25%;
  border: 1px solid gray;
  box-sizing: border-box;
}

<ul id="subcategory_list">
  <li style="order: 1000">1</li>
  <li style="order: 999">2</li>
  <li style="order: 998">3</li>
  <li style="order: 997">4</li>
  <li style="order: 996">5</li>
  <li style="order: 995">6</li>
</ul>