如何按宽度/尺寸对多行Flexbox元素进行排序优化布局？

你遇到的问题本质是flex布局的局限性：它是单向流式排列，元素必须严格按照文档顺序依次摆放，哪怕前面的行还有剩余空间，后面的短元素也不会主动填补进去，只能从新行开始。不过别担心，用CSS Grid就能完美解决这个自动填充空隙的需求。

修改后的CSS代码 #

替换你原来的flex布局代码，改用Grid：

ul.categoryList {
  display: grid;
  /* 自动根据内容宽度生成适配的列，不会截断元素 */
  grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));
  /* 核心属性：让网格自动填充空白区域 */
  grid-auto-flow: dense;
  /* 可选：增加元素间距，提升视觉体验 */
  gap: 8px;
  width: 180px;
}
ul.categoryList > li {
  list-style: none;
}

为什么这个方案有效？ #

• grid-template-columns: repeat(auto-fit, minmax(min-content, max-content))：让网格根据每个列表项的实际内容宽度自动创建合适的列数，确保短元素不会被强行拉伸，长元素也不会被截断。
• grid-auto-flow: dense：这是解决你问题的关键！它会让网格布局自动扫描并填充之前行的空白区域，原本分散在不同行的短元素（比如Literature和Books）会被自动组合到同一行，彻底解决空间浪费的问题。

为什么flex做不到？ #

flex布局是线性的，元素只能按文档顺序依次排列，当一个长元素占满当前行后，后续元素必须从新行开始，哪怕前面的行还有足够空间容纳短元素。它没有“回溯填充空白”的能力，这就是你看到短元素各占一行的原因。

如果你的项目需要兼容非常老旧的浏览器（比如IE11及以下），那可能需要JavaScript来重新排序元素，但现代浏览器都已经全面支持CSS Grid，所以这是最简洁高效的解决方案。

内容的提问来源于stack exchange，提问作者Denver Dang