1：flex彈性佈局（容器的屬性）

flex-direction

flex-wrap

flex-flow

justify-content（主軸的對齊方式）

align-items     align-items屬性定義專案在交叉軸上如何對齊。

align-content   align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

2：flex-direction屬性決定主軸的方向

   flex-direction: row | row-reverse | column | column-reverse;

3：flex-wrap: nowrap | wrap | wrap-reverse;

4：flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。

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

5：justify-content屬性定義了專案在主軸上的對齊方式。//注意主軸側軸

   justify-content: flex-start | flex-end | center | space-between | space-around;

6：align-items: flex-start | flex-end | center | baseline | stretch;

   align-items屬性定義專案在交叉軸上如何對齊。（側軸）

   stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

7：align-content屬性

align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

2：專案的屬性（）

order  flex-grow   flex-shrink    flex-basis    flex    align-self