久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術(shù)文章
文章詳情頁

css3 - 何時需要 flex-basis: 100% ?

瀏覽:121日期:2023-07-15 09:57:13

問題描述

下面例子中,同樣一個四點骰子為什么.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;}

問題解答

回答1:

摘錄友站前輩的解答,既簡潔又清晰:

樓主的問題可以歸結(jié)為:為什么.second-face 里的.column 會自動占 100%高度,而.first-face 里的.column 卻不會自動占 100%寬度?

我理解是因為 align-items 的缺省值是 stretch (.second-face ),而 flex-grow 缺省值為 0 (.first-face )。

回答2:

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

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

標(biāo)簽: CSS
相關(guān)文章:
主站蜘蛛池模板: 大洼县| 靖州| 祥云县| 阳高县| 永泰县| 庐江县| 延川县| 常熟市| 鄯善县| 阜城县| 邵武市| 沙河市| 民勤县| 开原市| 兴城市| 泗阳县| 桦甸市| 城步| 获嘉县| 宜良县| 广安市| 仙游县| 资中县| 大田县| 云安县| 桓台县| 集贤县| 潍坊市| 呈贡县| 宕昌县| 阿城市| 青州市| 铜陵市| 永济市| 鞍山市| 乌鲁木齐市| 秭归县| 尼玛县| 高密市| 南平市| 东山县|