flex屬性詳解

468122151 發(fā)布于2019-08-29 12:20 / 412人閱讀

摘要：在拜讀了阮一峰的布局教程和有關(guān)屬性的回答后整理成此文章，以便加深印象。屬性是三個(gè)屬性的簡寫形式。布局包括外部的容器和內(nèi)部的項(xiàng)目，屬性是項(xiàng)目的屬性。

在拜讀了阮一峰的flex布局教程和HaoyCn有關(guān)flex屬性的回答后整理成此文章，以便加深印象。

flex屬性是flex-grow,flex-shrink,flex-basis三個(gè)屬性的簡寫形式。

flex布局包括外部的容器和內(nèi)部的項(xiàng)目，flex屬性是項(xiàng)目的屬性。

若干個(gè)項(xiàng)目設(shè)置好flex屬性后，會(huì)有初始指定的占用空間x(具體的寬度值)，若父元素容器寬度值y大于子元素項(xiàng)目的占用空間x時(shí)，y-x便稱作剩余分配空間。

現(xiàn)將flex屬性詳細(xì)情況整理如下：

實(shí)例講解（借用HaoyCn的答案）

主軸上父容器總尺寸為 600px
子元素的總基準(zhǔn)值是：0% + auto + 200px = 300px，其中

0% 即 0 寬度
auto 對(duì)應(yīng)取主尺寸即 100px

故剩余空間為 600px - 300px = 300px
伸縮放大系數(shù)之和為： 2 + 2 + 1 = 5

剩余空間分配如下：

item-1 和 item-2 各分配 2/5，各得 120px
item-3 分配 1/5，得 60px

各項(xiàng)目最終寬度為：

item-1 = 0% + 120px = 120px
item-2 = auto + 120px = 220px
item-3 = 200px + 60px = 260px

當(dāng) item-1 基準(zhǔn)值取 0% 的時(shí)候，是把該項(xiàng)目視為零尺寸的，故即便聲明其尺寸為 140px，也并沒有什么用，形同虛設(shè)
而 item-2 基準(zhǔn)值取 auto 的時(shí)候，根據(jù)規(guī)則基準(zhǔn)值使用值是主尺寸值即 100px，故這 100px 不會(huì)納入剩余空間

參考資料：
阮一峰 Flex 布局教程：語法篇
阮一峰 Flex 布局教程：實(shí)例篇
flex設(shè)置成1和auto有什么區(qū)別-HaoyCn的回答