容器6屬性 display:flex

flex-direction:

row 預設值 | row-reverse | column | column-reverse

flex-wrap

wrap | nowrap 預設值 | wrap-reverse

flex-flow

flex-flow: <flex-direction> || <flex-wrap>;

justify-content

flex-start 預設值 | flex-end | center | space-between | space-around;

align-items

flex-start | flex-end | center | baseline | stretch 預設值;

align-content

flex-start | flex-end | center | space-between | space-around | stretch 預設值;

align-items 與 align-content的區別在於是否有wrap行為，如有則align-content是從整體考慮，而align-items僅僅是從當行考慮。

專案6屬性

order（順序）

flex-grow 預設0，存在剩餘空間也不放大

flex-shrink 預設1，如空間不足，則專案縮小

flex-basis

flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。

flex

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

align-self

參考資料:

https://www.runoob.com/w3cnote/flex-grammar.html