如何让flexbox项目在交叉轴上紧密排列？

首先明确结论：纯Flexbox没办法实现你要的这种交叉轴紧密排列效果。因为Flexbox是一维布局，它会把每一行的高度统一拉到该行最高元素的高度，下一行的所有元素都会对齐到上一行的底部，没法让某个元素“插”到上一行的空隙里（比如让E紧贴B的前提是B所在行的高度比A列矮，但Flexbox做不到这种跨行的空隙填充）。

如果要实现元素在交叉轴紧密贴合、精准填补空隙的效果，CSS Grid是更合适的方案，具体可以这么做：

1. 先定义基础的三列网格布局：

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px; /* 可选，设置元素间的间距 */
}

2. 如果你需要自动填补上一行的空白（类似瀑布流效果），可以给容器加上grid-auto-flow: dense，它会让后续元素自动填充前面的空隙位置；要是你需要精确控制E紧贴B、F紧贴C，直接给对应元素设置网格位置即可：
   比如假设B在第1行第2列，给E添加如下样式就能让它紧贴B下方：

.item-e {
  grid-row: 2 / span 1;
  grid-column: 2 / span 1;
}

同理给F设置对应列的网格位置，就能实现你要的精准排列效果。

补充说明：如果你的需求是类似Pinterest那种不规则高度的瀑布流，Grid的grid-auto-flow: dense就能满足自动填充空隙的需求；而Flexbox因为一维布局的特性，只能实现每行高度统一的规整布局，处理不了这种交叉轴的紧密排列场景。

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