昨天的文章有跟大家提到flex-grow跟flex-shrink，今天要跟大家提一下flex-basis這個屬性。

flex-basis

flex-basis 可能會這樣覺得在使用flexbox的時取代width和height的一個值，但其實不然完完全全這樣說。

應該說它是定義彈性列成長空間和彈性壓縮空間的初始值/預設值。下面是會運用到的值

• auto 自動
• length 長度
• percentage 百分比
• 0

auto 自動

如果沒有設定的話flex-basis的預設值就是auto，由你的主軸方向決定你的預設值是什麼。

如果你沒有設定width跟height會自動計算為內容尺寸，也就是內容的壓縮極限尺寸。

主軸方向是row會影響的就是寬度，由內容撐開你的寬度並由內容決定寬度。
主軸方向是column會影響的就是高度，由內容撐開你的高度並由內容決定高度。

length 長度

用長度單位來當成 flex-basis 的初始值，原本的主軸尺寸初始值會被覆寫，如果不設定成長和壓縮係數（將 flex-shrink 設為 0），flex-basis 才會真的會成為彈性項目的尺寸。（除此之外還是會受到其他屬性如：min-width, min-height, max-width, max-height 的影響，這幾個屬性需要先被滿足。）

那min-width, min-height, max-width, max-height這些單位分別又是什麼?

• min-width:最小寬度不會低於這個數值。
• min-height:最小高度不會低於這個數值。
• max-width:最大寬度不會超過這數值。
• max-height:最大高度不會超過這個數值。

優先性:min-width＞max-width＞flex＞width

上面這些數字通常比較會利用在RWD設計上。

percentage 百分比

用百分比單位來當成 flex-basis 的初始值，設為 100% 時便等於將尺寸初始值設為flex元素的100%寬度，設為 N% 就是將尺寸初始值設為flex元素的 N%，以此類推。

0

flex-basis 設為 0 時，彈性項目的主軸尺寸初始值其實不是 0 （如果是 0 就沒辦法計算下去了）。
而是會等於彈性容器的寬度，也就是說如果長度不足彈性容器而設定 flex-grow，則會依照 flex-grow 的比例去直接分配彈性項目的尺寸；
如果長度超過彈性容器而設定 flex-shrink，就會依照 flex-shrink 的比值來直接分配。

flex

這邊要在提到之前沒有提到過的一個寫法flex

這是flex-grow、flex-shrink、flex-basis等屬性的縮寫屬性。

寫法大概如下

item {
        flex:1,0,200px
}

按照順序由左至右flex-grow、flex-shrink、flex-basis。

那今天對於flex-basis的介紹就到這邊啦

參考文章

Day5【主題一：Flexbox】＿彈性項目相關屬性/flex屬性/flex-grow屬性/flex-shrink屬性/flex-basis屬性/flex縮寫/order屬性

[Day 15] flex 屬性: flex-basis