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

Question

下面例子中，同样一个四点骰子
为什么.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;
}

Answer 1

摘錄友站前輩的解答，既簡潔又清晰：

樓主的問題可以歸結為：為什麼.second-face 裡的.column 會自動佔 100%高度，而.first-face 裡的.column 卻不會自動佔 100%寬度？

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

Answer 2

因為你的第二個盒子 是 縱向佈局 你添加了 flex-direction: column;

而第一個盒子 你又應用了 flex-wrap: wrap; 內容超出後換行 而且用的是 align-content而不是justify-content 內容超出換行後 對齊方式justify-content: space-between不再生效