文科少女學程式

很久沒來好好看一下CSS了！今天來好好了解一下，在切版時，其實很常會使用到的flex屬性。
在正式來認識flex之前，先從它的組成屬性開始認識吧！

flex代表的三個屬性
flex的組成屬性一：flex-grow
是可以設定item在容器中佔多少空間，或是分到多少剩餘空間的屬性，這個屬性的預設值為0，最小總和是1，如果在屬性中使用小於1的數值的話，就會有剩餘的空間沒被使用到。
實際的例子：
在一個寬度為600px的container裡面共有三個item，每個item的設定寬度為100px。
例子1、
當對item a將flex-grow設定為1時，將會把剩餘的空間全部分給item a。也就會變成雖然三個item本身的寬度加在一起無法填滿整個container，但是因為item a設定的flex-grow: 1，所以剩下的空間都會被item a填滿。


例子2、
若寫成以下的內容，將會依照比例將剩餘的空間(300px)分給item a和item b。
所以item a的寬就會變成300*1/3+100 = 200px
item b的寬則會變成300*2/3+100 = 300px

例子3、
數值可設定成小數點，若是寫成以下內容，一樣會依照比例將剩餘的空間(300px)分給item a和item b。
item b的寬會被壓縮成300*0.4+100 = 220px
item c的寬會被壓縮成300*0.6+100 = 280px

想實際動手試試看可以點擊這裡


flex的組成屬性二：flex-shrink
概念與flex-grow相反，flex-grow是去把空出來的空間進行分配，flex-shrink則時把超過的空間，拿回來依照比例縮小。這個屬性的預設值為1，如果不希望被自動壓縮到，可以設定為0。
實際例子：
在一個寬度為600px的container裡面共有三個item，每個item的設定寬度為300px。

例子1、
當對item a將flex-grow設定為0時，將會把多出來的空間，往回壓縮item b和 item c，item a 則不受影響，一樣維持寬度為300px。

例子2、
若寫成以下的內容，將會依照比例將多出來的空間(300px)依照比例往回壓縮item b和item c。
所以item b的寬就會變成300- 1/3*300 = 200px
item c的寬則會變成300-2/3*300 = 100px

例子3、
數值還可以用小數點的數值來設定，若是寫成以下內容，item b和 item c就會各自被壓縮成以下兩種寬度。
item b的寬會被壓縮成300- 0.4*300 = 180px
item c的寬會被壓縮成300-0.6*300 = 120px

想實際動手試試看可以點擊這裡

flex的組成屬性三：flex-basis
這個屬性跟width和height很像，會決定item的高或寬，當flex-direction設定為row時，會決定item的寬；當flex-direction設定為column時，會決定item的高。這個屬性的預設值為auto，所以會先依照item的內容決定寬或高，這邊的數值可以設定成%，也可以設定成px。
實際的例子：
在一個寬度為600px的container裡面共有三個item，每個item的設定寬度為100px。

例子一、將item a的flex-basis設定成50%，所以item a的寬會是300px。

例子二、將item b的flex-basis設定成400px，所以item b的寬會是400px。

想實際動手試試看可以點擊這裡


flex屬性是什麼？
flex屬性其實是flex-grow, flex-shrink, flex-basis這三個CSS屬性的縮寫。當我們想要使用flex-grow, flex-shrink, flex-basis這三個屬性來調整版面時，使用flex這個屬性就能一次設定，不需要寫三個屬性。flex屬性的預設值為0 1 auto，意即不要自動拉伸填滿空出來的空間，而且當空間不足時，自動依照比例壓縮，基礎的寬或高依照item的內容物決定。

flex該怎麼使用？
flex屬性最多可以設定三個值，也可以只設定一個屬性，直接來看幾個案例。

只設定一個值
例子一、設定一個沒有單位的值　=>　等於設定flex-grow
在一個寬為600px的container中，有3個寬為100px的item，當設定item a 設定flex:1時，item a會填滿空下來的空間。

例子二、設定一個有單位的值 =>　等於設定flex-basis
在一個寬為600px的container中，有3個寬為100px的item，當設定item a 設定flex: 200px時，item a的寬會變成200px+多出來的200px。
為什麼呢？因為這個時候flex-grow會是預設值1，意思就是說，若是有空出來的空間，item a也就會自己延伸，也就變成400px。

若在600px的container中，裝著3個150px的item的話，這個時候若將item a設定flex: 300px，則item a的寬會變成300px。因為原本都是150px的狀態下，還有空下150px的建，設定flex: 300px，族會讓item a則會變成300px。

但是！若三個item的原本寬度加總就已經等於或大於container寬度，用有單位的數值設定flex則有可能讓item被壓縮到，因為flex-shrink的預設值為1，意思是container空間不足時，item會被擠壓。

設定兩個值
例子一、設定兩個沒有單位的值 => 等於同時設定flex-grow和flex-shrink
會依照當下的狀況，決定是要延伸還是被壓縮，如果空間不夠，就會套用到flex-shrink的部分；如果空間還有剩，則是會套用到flex-grow的部分。
例子二、設定一個沒單位的值和一個有單位的值 => 等於同時設定flex-grow和flex-basis
在這樣的設定下，如果空間足夠，就可以套用到flex-basis，若空間不足，則會因為flex-shrink的預設值，讓他從flex-basis的寬被擠壓。flex-grow的部分則看是設定0或1，並且依照當下是否還有剩餘空間，來決定是否會填滿，讓寬度超過flex-basis。

設定三個值
例子一、三個值都設定 => 等於同時設定flex grow、flex-shrink、flex-basis
這個就更好理解了，就是一次設定上述三個屬性的意思，套用時機一樣是依照當下容器是否有剩餘的空間，或item加總單位是否超過容器。

以上這些就是本次靜下心來好好認識flex這個屬性的學習筆記啦！
這個屬性設定後，還會依照當下的實際狀況而決定實際呈現的結果，所以想要正確使用，就還需要多多熟悉和練習。
那這次的內容就到這裡囉！掰餔～