如何让flex-direction:column且flex-wrap:wrap的列表列宽仅适配内容

嘿，我来帮你搞定这个flex布局的问题～

首先得搞清楚为什么justify-content没效果：当你把flex容器设置为flex-direction: column时，flex的主轴变成了垂直方向，justify-content属性是用来控制**主轴（垂直）上的元素对齐的。但你同时设置了flex-wrap: wrap，当列表项的总高度超过容器的height: 100px时，元素会在交叉轴（水平方向）**上换行排列——这时候justify-content根本管不到交叉轴的布局，所以你设置它完全看不到变化。

解决方案 #

根据你的需求，分两种情况处理：

1. 想控制水平方向（换行后的列）的对齐/间距

这时候需要用align-content属性（专门控制交叉轴上的多行内容对齐），同时记得给列表项设置宽度，不然它们会默认撑满每列的水平空间，你看不到对齐效果。修改后的代码如下：

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  padding: 0;
  margin: 0;
  align-content: space-between; /* 水平方向列均匀分布，可替换为center/space-around等值 */
}

li {
  background: white;
  border: 1px solid #ccc;
  list-style: none;
  padding: 5px;
  margin: 2px;
  width: 100px; /* 必须设置宽度，否则看不到水平对齐效果 */
}

2. 想控制垂直方向（主轴）的元素对齐

如果你的需求是让垂直方向的列表项有间距或对齐，那要确保列表项的总高度小于容器的100px，这时候justify-content就会生效了，比如：

ul {
  display: flex;
  flex-direction: column;
  height: 100px;
  padding: 0;
  margin: 0;
  justify-content: center; /* 垂直方向居中对齐，可替换为space-between/space-around等值 */
}

li {
  background: white;
  border: 1px solid #ccc;
  list-style: none;
  padding: 5px;
  margin: 2px;
}

这样就能实现你想要的布局效果啦～

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