彈性佈局可以為盒狀模型帶來很大的靈活性。容器中存在兩條軸，水平的主軸和垂直的交叉軸，專案預設以主軸排序。
設定flex彈性佈局時，記得將容器的佈局指定為flex佈局。>>> display: flex
行內模型也可以設定flex佈局，>>> display: inline-flex

容器的六個屬性：

flex-direction決定主軸的方向（預設是水平軸）

• row主軸為水平方向，起點在左邊、
• column主軸是垂直方向，起點在上方、
• row-reverse主軸為水平方向，起點在右邊、
• column-reverse主軸是垂直方向，起點在下方、

flxe-wrap當專案在軸線上排列不下時，如何換行

• nowrap預設不換行、
• wrap換行，第一行在上方、
• wrap-reverse換行，第一行在下方、

flex-flow屬性是上兩個屬性的簡寫模式，可以同時設定兩個屬性

justify-content屬性定義了專案在主軸（預設水平軸）上的對齊方式。

• flex-start：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊
• space-around：每個專案兩側的間隔相等

align-items屬性定義專案在交叉軸（預設垂直軸）上如何對齊

• flex-start：起點對齊。
• flex-end：終點對齊。
• center：中點對齊。
• baseline: 專案的第一行文字的基線對齊。
• stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

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

• flex-start：與交叉軸的起點對齊。
• flex-end：與交叉軸的終點對齊。
• center：與交叉軸的中點對齊。
• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
• space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（預設值）：軸線佔滿整個交叉軸。

使用時應注意：容器設為 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。
flex彈性佈局可以很方便的將容器中的元素設定為水平和垂直居中對齊，還是一個很好用的css方法