Flexbox（flex-direction:column）：含固定宽子元素时换行子项定位异常

我来帮你拆解下这个Flexbox布局的问题，核心是column wrap的布局逻辑和你给子元素设置的宽度规则之间的冲突导致了空白。

为什么会出现大量空白？ #

当使用flex-flow: column wrap时，Flex容器会先沿着垂直方向（列方向）排列子元素，填满一列的高度后再创建新列。你的容器高度设为100px，child1的flex-basis:100%让它刚好占满第一列的全部高度，所以child2和child3只能换行到第二列，这部分是符合预期的。

问题出在交叉轴的空间分配上：column wrap的交叉轴是水平方向，Flex容器默认的align-content属性值是stretch——如果容器的宽度大于所有列的总宽度（比如容器撑满了父元素的宽），这个属性会让列之间的空白被自动拉伸，导致第一列和第二列之间出现大量空隙。另外，child1的max-width:100px固定了第一列的宽度，而child2/child3的flex-shrink:0又固定了第二列的宽度，进一步加剧了空白的出现。

针对性解决方案 #

这里有几个实用的方案，你可以根据实际场景选择：

方案1：修改容器的align-content属性

直接把容器的align-content改成flex-start，让所有列从交叉轴的起点（左侧）紧贴排列，不会自动拉伸列之间的空间：

.flex { 
  display: flex; 
  flex-flow: column wrap; 
  height: 100px; 
  border: 1px solid red;
  align-content: flex-start; /* 关键修改 */
}
.child1 { background-color: green; flex: 1 0 100%; max-width: 100px; }
.child2 { flex: 1 0 20px; background-color: yellow; }
.child3 { flex: 1 0 20px; background-color: blue; }

这个方案最直接，不管容器最终宽度是多少，列都会紧紧挨在一起，不会出现空白。

方案2：固定容器的总宽度

如果你希望容器的宽度刚好容纳所有列，没有多余空间，可以直接设置容器宽度为两列的宽度之和：

.flex { 
  display: flex; 
  flex-flow: column wrap; 
  height: 100px; 
  border: 1px solid red;
  width: 120px; /* 100px(child1宽度) + 20px(第二列宽度) */
}
/* 子元素样式保持不变 */

这样容器宽度刚好适配列的总宽度，自然不会有多余空白。

方案3：允许子元素收缩（可选）

如果你不需要第二列宽度固定，可以把child2和child3的flex-shrink改成1，让它们能根据容器宽度自动调整，配合align-content: stretch还能让列平分容器水平空间：

.child2 { flex: 1 1 20px; background-color: yellow; } /* flex-shrink从0改为1 */
.child3 { flex: 1 1 20px; background-color: blue; }

不过这个方案会改变第二列的宽度，适合需要自适应宽度的场景。

效果验证 #

修改后，child1会完整占满容器的100px高度，child2和child3会紧贴着第一列的右侧排列，完全符合你“第一个子元素占满高度，后续子元素换行到下一列且无空白”的预期。

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