https://www.oxxostudio.tw/articles/201501/css-flexbox.html
https://zh-tw.learnlayout.com/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.oxxostudio.tw/articles/201501/css-flexbox.html
https://zh-tw.learnlayout.com/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox 模型概念
- 水平的起點與終點 ( main start、main end )
- 垂直的起點與終點 ( cross start、cross end )
- 水平軸與垂直軸 ( main axis、cross axis )
- 元素具有水平尺寸與垂直尺寸 ( main size、cross size )
Flexbox 屬性介紹
- display
- flex-direction
- justify-content
- align-items
- align-self
- align-content
- flex-wrap
- order
- flex
display
一開始要宣告為 flex 才能使用，其布局方式與 block 幾乎類似，都會強迫換行。除了 flex 外，還有一個 inline-flex，作用類似於 inline-block + flex。意義上都是一個 display:flex 的元素外面包覆 display:inline 的屬性，在後方的元素不會換行。
flex-direction
flex-direction 表示 Flexbox 內容元素的「排列方向」，分別有下列四種。
- row：預設值，由左到右，從上到下
- row-reverse：與 row 相反
- column：從上到下，再由左到右
- column-reverse：與 column 相反
justify-content
justify-content 決定了內容元素與整個 Flexbox 的「水平對齊」位置，回想一下最上面講的 Flexbox 盒子模型，具有 main start 與 main end 左右兩個端點，justify-content 就是按照這個方式做設定，而其中的設定值總共有下列五個。
- flex-start：預設值，對齊最左邊的 main start
- flex-end：對齊最左邊的 main end
- center：水平置中
- space-between：平均分配內容元素，左右元素將會與 main start 和 main end 貼齊
- space-around：平均分配內容元素，間距也是平均分配
align-items
align-items 剛好和 justify-content 相反，align-items 決定了內容元素與整個 Flexbox 的「垂直對齊」位置，再回想一下最上面講的 Flexbox 盒子模型，具有 cross start 與 cross end 左右兩個端點，align-items 與 align-self 就是按照這個方式做設定，設定值總共有下列五個。
- flex-start：對齊最上面的 cross start
- flex-end：對齊最下面的 cross end
- center：垂直置中
- stretch：預設值，將內容元素全部撐開至 Flexbox 的高度
- baseline：以所有內容元素的基線作為對齊標準
align-self
align-self 的設定與 align-items 相同，但目的不同，align-self 的作用在於覆寫已經套用 align-items 的屬性，如果照我們以前所寫，因為 align-items 是針對子元素，所以必須要用 align-self 來進行覆寫。
align-content
剛剛談到的 align-items 是針對內容為單行的元素進行處理，如果遇到多行的元素，就要使用 align-content 這個屬性，這個屬性總共有六個設定值。
- flex-start：對齊最上面的 cross start
- flex-end：對齊最下面的 cross end
- center：垂直置中
- space-between：將第一行與最後一行分別對齊最上方與最下方
- space-around：每行平均分配間距
- stretch：預設值，內容元素全部撐開
align-content
剛剛談到的 align-items 是針對內容為單行的元素進行處理，如果遇到多行的元素，就要使用 align-content 這個屬性，這個屬性總共有六個設定值。
- flex-start：對齊最上面的 cross start
- flex-end：對齊最下面的 cross end
- center：垂直置中
- space-between：將第一行與最後一行分別對齊最上方與最下方
- space-around：每行平均分配間距
- stretch：預設值，內容元素全部撐開
flex-wrap
在剛剛的範例看到一個 flex-wrap 的屬性，這個屬性負責的是讓內容的元素換行，因為當我們把父元素的 display 設定為 flex 或 inline-flex 的時候，子元素就是以單行的方式，彈性撐滿父元素，所以就要利用 flex-wrap 來換行，共有三個設定值。( 範例：css-flexbox-demo7.html)
- nowrap：預設值，單行
- wrap：多行
- wrap-reverse：多行，但內容元素反轉
order
剛剛在 flex-wrap 的屬性裏頭看到了可以把元素反轉，order 這個屬性更是可以直接指定一個數字，就可以由小到大的排列順序。( 範例：css-flexbox-demo8.html)
flex
好酒沉甕底，有耐心看到下面的才會看到重點喔哈哈！flex 應該是 Flexbox 裏頭最重要的屬性了，而 flex 其實是由三個屬性組合而成，依照先後順序分別是「flex-grow」、「flex-shrink」和「flex-basis」，如果 flex 只填了一個數值 ( 無單位 )，那麼預設就是以 flex-grow 的方式呈現，至於三個屬性的解釋如下：
- flex-grow：數字，無單位，當子元素的 flex-basis 長度「小」於它自己在父元素分配到的長度，按照數字做相對應的「伸展」比例分配，預設值為 0，不會進行彈性變化，不可為負值，設為 1 則會進行彈性變化。
- flex-shrink：數字，無單位，當子元素的 flex-basis 長度「大」於它自己在父元素分配到的長度，按照數字做相對應的「壓縮」比例分配，預設值為 1，設為 0 的話不會進行彈性變化，不可為負值。
-
flex-basis：子元素的基本大小，作為父元素的大小比較基準，預設值為 0，也因為預設值為 0，所以沒有設定此屬性的時候，會以直接採用 flex-grow 屬性，flex-basis 也可以設為 auto，如果設為 auto，就表示子元素以自己的基本大小為單位。。
三個屬性可以分開設定，也可以合在一起用一個 flex 統一設定，下面的例子展現出同一個 Flexbox，在不同的寬度，子元素會有不同大小的呈現。( 範例：css-flexbox-demo9.html)