首先明確一點是， flex 是 flex-grow、flex-shrink、flex-basis的縮寫。故其取值可以考慮以下情況：
flex 的預設值是以上三個屬性值的組合。假設以上三個屬性同樣取預設值，則 flex 的預設值是 0 1 auto。同理，如下是等同的：
.item
.item
.item
.item
.item
.item
.item
.item
.item-1
.item-1
.item-2
.item-1
tem
.item
.item
.item
auto：首先檢索該子元素的主尺寸，如果主尺寸不為 auto，則使用值採取主尺寸之值；如果也是 auto，則使用值為 content。
content：指根據該子元素的內容自動布局。有的使用者**沒有實現取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。
百分比：根據其包含塊（即伸縮父容器）的主尺寸計算。如果包含塊的主尺寸未定義（即父容器的主尺寸取決於子元素），則計算結果和設為 auto 一樣。
舉乙個不同的值之間的區別：
主軸上父容器總尺寸為 600px
子元素的總基準值是：0% + auto + 200px = 300px，其中
0% 即 0 寬度
auto 對應取主尺寸即 100px
故剩餘空間為 600px - 300px = 300px
伸縮放大係數之和為： 2 + 2 + 1 = 5
剩餘空間分配如下：
item-1 和 item-2 各分配 2/5，各得 120px
item-3 分配 1/5，得 60px
各專案最終寬度為：
item-1 = 0% + 120px = 120px
item-2 = auto + 120px = 220px
item-3 = 200px + 60px = 260px
當 item-1 基準值取 0% 的時候，是把該專案視為零尺寸的，故即便宣告其尺寸為 140px，也並沒有什麼用，形同虛設
而 item-2 基準值取 auto 的時候，根據規則基準值使用值是主尺寸值即 100px，故這 100px 不會納入剩餘空間
flex和flex 1的含義
flex可以參考阮一峰老師的flex布局教程，很詳細看完啥都懂了 當我看完阮老師的flex教程還是對flex 1或者flex 0 等存在疑惑，然後又看到一篇部落格，是對flex的乙個補充吧 首先明確一點是，flex是flex grow flex shrink flex basis的縮寫。故其取值可以...
flex布局知識點
flexbox 布局最合適小規模布局，而網格布局適合較大規模布局。float,clear,vertical align 在flex中不起作用。flex布局中，有兩類作用于父節點也子節點的樣式，大部分簡單的布局只要把父節點寫好了，子節點是沒有多大問題的。display flex 宣告布局方式 flex...
flex知識點歸納
flex基本用法是給父容器設定 display flex 參考 那麼它下面的所有子元素，自動成為flex的item項。flex flow是flex direction和flex wrap的簡寫。flex flow row row reverse column column reverse nowar...