前言：

1.Flex佈局支援所有瀏覽器。（ie10以上） 2.Webkit核心的瀏覽器，必須加上-webkit字首。 3.設為Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。

容器的屬性

• 主軸方向：flex-direction:row | row-reverse | column | column-reverse(決定主軸方向，即專案排列方向)
• 是否換行：flex-wrap:nowrap | wrap | wrap-reverse (不換行/換行第一行在上面/換行第一行在下面)
• 主軸和換行的簡寫：flex-flow:row||wrap
• 主軸對齊方式：justify-content: flex-start | flex-end | center | space-between | space-around

flex-start（預設值）：左對齊 flex-end：右對齊 center： 居中 space-between：兩端對齊，專案之間的間隔都相等。 space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。

• 交叉軸對齊方式：align-items: flex-start | flex-end | center | baseline | stretch

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

• 多根軸線的對齊方式：align-content: flex-start | flex-end | center | space-between | space-around | stretch

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

專案的屬性

1.order:預設為0，數值越小越靠前 2.flex-grow:專案剩餘空間放大比例。預設為0。 3.flex-shrink:專案縮小比例，預設為1，如果空間不足，該專案將縮小。 4.flex-basis：定義了在分配多餘空間之前，專案佔據的主軸空間，預設auto 5.flex:是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。 6. align-self:align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。