css3 - 何时需要 flex-basis: 100% ？

问题描述

下面例子中，同样一个四点骰子为什么.first-face必须有flex-basis: 100%;，而.second-face不需要呢？

codepen地址

/* 核心代码 */.first-face { display: flex; flex-wrap: wrap; align-content: space-between;}.first-face .column { display: flex; justify-content: space-between; flex-basis: 100%; /* 为什么必须有这一行？ */}.second-face { display: flex; justify-content: space-between; /* 这里为什么不需要flex-basis: 100%; ？*/}.second-face .column { display: flex; flex-direction: column; justify-content: space-between;}

问题解答

摘录友站前辈的解答，既简洁又清晰：

楼主的问题可以归结为：为什么.second-face 里的.column 会自动占 100%高度，而.first-face 里的.column 却不会自动占 100%宽度？

我理解是因为 align-items 的缺省值是 stretch （.second-face ），而 flex-grow 缺省值为 0 （.first-face ）。

因为你的第二个盒子 是 纵向布局 你添加了 flex-direction: column;

而第一个盒子 你又应用了 flex-wrap: wrap; 内容超出后换行 而且用的是 align-content而不是justify-content 内容超出换行后 对齐方式justify-content: space-between不再生效