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;}
問題解答
回答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不再生效
相關(guān)文章:
1. python3.x - python連oanda的模擬交易api獲取json問題第五問2. docker - 如何修改運行中容器的配置3. nignx - docker內(nèi)nginx 80端口被占用4. docker-machine添加一個已有的docker主機(jī)問題5. java - SSH框架中寫分頁時service層中不能注入分頁類6. 關(guān)于docker下的nginx壓力測試7. 為什么我ping不通我的docker容器呢???8. node.js - 我是一個做前端的,求教如何學(xué)習(xí)vue,node等js引擎?9. javascript - js代碼獲取驗證碼倒計時問題10. html5 - 百度echart官網(wǎng)下載的地圖json數(shù)據(jù)亂碼
