首先明確一點是， flex 是 flex-grow、flex-shrink、flex-basis的縮寫。故其取值可以考慮以下情況：
flex 的預設值是以上三個屬性值的組合。假設以上三個屬性同樣取預設值，則 flex 的預設值是 0 1 auto。同理，如下是等同的：
.item
.item
當 flex 取值為 none，則計算值為 0 0 auto，如下是等同的：
.item
.item
當 flex 取值為 auto，則計算值為 1 1 auto，如下是等同的：
.item
.item
當 flex 取值為乙個非負數字，則該數字為 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：
.item
.item
當 flex 取值為乙個長度或百分比，則視為 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情況（注意 0% 是乙個百分比而不是乙個非負數字）：
.item-1
.item-1
.item-2
.item-1
當 flex 取值為兩個非負數字，則分別視為 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：
.item
.item
當 flex 取值為乙個非負數字和乙個長度或百分比，則分別視為 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：
.item
.item
flex-basis 規定的是子元素的基準值。所以是否溢位的計算與此屬性息息相關。flex-basis 規定的範圍取決於 box-sizing。這裡主要討論以下 flex-basis 的取值情況：
auto：首先檢索該子元素的主尺寸，如果主尺寸不為 auto，則使用值採取主尺寸之值；如果也是 auto，則使用值為 content。
content：指根據該子元素的內容自動布局。有的使用者**沒有實現取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。
百分比：根據其包含塊（即伸縮父容器）的主尺寸計算。如果包含塊的主尺寸未定義（即父容器的主尺寸取決於子元素），則計算結果和設為 auto 一樣。
舉乙個不同的值之間的區別：
.parent
.parent > div
.item-1
.item-2
.item-3
主軸上父容器總尺寸為 600px
子元素的總基準值是：0% + auto + 200px = 300px，其中
伸縮放大係數之和為： 2 + 2 + 1 = 5
剩餘空間分配如下：
而 item-2 基準值取 auto 的時候，根據規則基準值使用值是主尺寸值即 100px，故這 100px 不會納入剩餘空間
flex布局布局之flex 1屬性詳解
採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 主軸的開始位置 與邊框的交叉點 叫做main...
flex和flex 1的含義
flex可以參考阮一峰老師的flex布局教程，很詳細看完啥都懂了 當我看完阮老師的flex教程還是對flex 1或者flex 0 等存在疑惑，然後又看到一篇部落格，是對flex的乙個補充吧 首先明確一點是，flex是flex grow flex shrink flex basis的縮寫。故其取值可以...
flex的常見知識點 flex 1
首先明確一點是，flex 是 flex grow flex shrink flex basis的縮寫。故其取值可以考慮以下情況 flex 的預設值是以上三個屬性值的組合。假設以上三個屬性同樣取預設值，則 flex 的預設值是 0 1 auto。同理，如下是等同的 item item 當 flex 取...