flex佈局的基本知識

首先介紹是什麼是flex佈局：

flex佈局就是一種新的佈局方案，通過為修改父div的display屬性，讓父元素成為一個flex容器，從而可以自由的操作容器中子元素(專案)的排列方式。

容器屬性

1.flex-direction屬性

取值：
row（預設）：橫向排列，專案排列順序為正序1-2-3
row-reverse：同為橫向排列，但專案順序為倒序3-2-1
column ：與row相反，為縱向排列，專案順序為正序1-2-3
column-reverse：同為縱向排列，專案順序為倒序3-2-1

2.flex-wap屬性

取值：
nowwap：不換行

wap：超出父容器寬度會自然換行

3.flex-flow屬性

flex-flow屬性是flex-deriction與flex-wrap屬性的簡寫集合，預設屬性為row nowrap，即橫向排列，且不換行，如果需要控制專案排列與換行

4.justify-content屬性
用於控制專案在橫軸的對齊方式

取值：
flex-start：即左對齊

flex-end：右對齊

center：居中

space-between：左右兩端對齊，即左右兩側專案都緊貼容器，且專案之間間距相等

space-around：為專案之間間距為左右兩側專案到容器間距的2倍

5.align-items屬性
用於控制專案在縱軸的對齊方式

取值：
stretch(預設)：如果專案設定高度，或高度為auto，則佔滿整個容器

flex-start：專案在縱軸緊貼容器頂部

center：居中

flex-end：專案緊貼縱軸底部

baseline:目以第一行文字的基線為參照進行排列

注意，常理來說justify-content與align-items預設分別處理專案橫軸，縱軸的對齊方式，但如果我們修改了flex-direction為column，它們處理的軸向會交換，也就是justify-content處理縱軸，align-items處理橫軸。

6.align-content
用於控制多行專案的對齊方式，如果專案只有一行則不會起作用

取值：（大體和align-item的方式差不多）
stretch（預設）：專案沒設定高度，或高度為auto情況下讓專案填滿整個容器

flex-start：頂部對齊

flex-end：底部對齊

center：居中

space-around：與justify-content保持一致，即專案之間間距為上下兩端專案與容器間距兩倍。

space-evenly：專案之間間距與專案到容器之間間距相等

space-between：上下兩側專案緊貼容器

專案屬性

1.order：預設0

2.flex-grow：預設0
用於決定專案在有剩餘空間的情況下是否放大，預設不放大

假設預設三個專案中前兩個個專案都是0，最後一個是1，最後的專案會沾滿剩餘所有空間

假設只有第一個專案預設為0，後面兩個專案flex-grow均為1，那麼後兩個專案平分剩餘空間
假設第一個專案預設為0，第二個專案為flex-grow:2，最後一個專案為1，則第二個專案在放大時所佔空間是最後專案的兩倍

3.flex-shrink：預設1
用於決定專案在空間不足時是否縮小，即空間不足時大家一起等比縮小

但如果某個專案flex-shrink設定為0，則即便空間不夠，自身也不縮小

上圖中的第二個專案flex-shrink為0，所以自身不會縮小

4.flex-basis：預設auto
用於設定專案寬度，預設auto時，專案會保持預設寬度，或者以width為自身的寬度，但如果設定了flex-basis，權重會width屬性高，因此會覆蓋widtn屬性

上圖中先設定了flex-basis屬性，後設置了width屬性，但寬度依舊以flex-basis屬性為準

5.flex：預設auto，0，1
flex屬性是flex-grow，flex-shrink與flex-basis三個屬性的簡寫，用於定義專案放大，縮小與寬度。

6.align-self：預設auto
用於讓個別專案擁有與其它專案不同的對齊方式

如：對專案二有align-self：flex-end

總結：

flex佈局幾乎就是這些常用的，如果後續還有的話，我會加以補充。