問題描述

下面例子中，同樣一個(gè)四點(diǎn)骰子為什么.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;}

問題解答

摘錄友站前輩的解答，既簡(jiǎn)潔又清晰：

樓主的問題可以歸結(jié)為：為什么.second-face 里的.column 會(huì)自動(dòng)占 100%高度，而.first-face 里的.column 卻不會(huì)自動(dòng)占 100%寬度？

我理解是因?yàn)?align-items 的缺省值是 stretch （.second-face ），而 flex-grow 缺省值為 0 （.first-face ）。

因?yàn)槟愕牡诙€(gè)盒子 是 縱向布局 你添加了 flex-direction: column;

而第一個(gè)盒子 你又應(yīng)用了 flex-wrap: wrap; 內(nèi)容超出后換行 而且用的是 align-content而不是justify-content 內(nèi)容超出換行后 對(duì)齊方式j(luò)ustify-content: space-between不再生效