如何在flex-direction: column容器中使Flexbox列宽度统一为最大列宽度？

嘿，刚好知道怎么解决这个问题！你想要在垂直排列的Flex容器里，让所有子列自动匹配最宽那列的宽度，还不想手动设置flex-basis或width对吧？其实只需要改一个属性就能搞定：

核心解决方案 #

把Flex容器的align-items从flex-start改成stretch就可以了！

原理说明 #

当flex-direction: column时，align-items控制的是子元素在水平方向的对齐行为。设置为stretch后，所有子元素会自动拉伸以填满容器的水平空间。而由于容器没有固定宽度，它的宽度会自动适配子元素中最宽的那个的内容宽度——这样一来，所有子列的宽度就都会统一成那个最大宽度，完全符合你的需求。

修改后的代码示例 #

CSS

.row{ 
  display: flex; 
  flex-direction: column; 
  align-items: stretch; /* 关键修改就在这里 */
}
.column{ 
  border: 1px red dashed; 
}

HTML

<div class="row">
  <div class="column"> Small Content </div>
  <div class="column"> Medium Content Medium Content </div>
  <div class="column"> Large Content Large Content Large Content </div>
</div>

这样调整后，你会看到所有红色虚线框的宽度都和内容最长的那列保持一致，全程不需要手动指定任何宽度值，完全由内容自动驱动宽度适配~

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