a.使用在容器上的六大屬性值：
1.flex-direction
2.flex-wrap
3.flex-flow
4.justify-content
5.align-items
6.align-content
1.flex-direction屬性決定主軸的方向，即專案的排列方式
有四個值可供選擇：
row（預設值），主軸為水平方向，起點為左端；
row-reverse，主軸為水平方向，起點為右端；
column，主軸為垂直方向，起點為上端；
column-reverse，主軸為垂直方向，起點為下端；
2.flex-wrap，預設情況一般是排列在一條線上，如果一條線排不完，可用屬性值換行
nowrap：預設值，不換行；
wrap：換行，第一行在上方；
wrap-reverse，換行，第一行在下方；
3.flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
格式：.box
(等價於：
.box)
4.justify-content屬性定義了專案在主軸上的對齊方式。
有5個值可選：
flex-start（預設值）：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊，專案之間的間隔都相等
space-around：每個專案兩側的間隔相等。（所有專案之間的間隔比專案與邊框的間隔大一倍）
5.align-items屬性定義專案在交叉軸上如何對齊。
有5個值可選:
flex-start：交叉軸的起點對齊
flex-end：交叉軸的終點對齊
center：交叉軸的中點對齊
baseline：專案的第一行文字的基線對齊
stretch：（預設值），如果專案未設定高度或設為auto，將沾滿整個容器的高度
6.align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
有6個值可選：
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。
b.設定在專案上的六大屬性值：
1.order
2.flex-grow
3.flex-shrink
4.flex-basis
5.flex
6.align-self
1.order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
2.flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
（如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。)
3.flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
（如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。）
4.flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
（它可以設為跟width或height屬性一樣的值，則專案將佔據固定空間。）
5.flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
(該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。)
6.align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。其餘可選的值與align-items相同。
關於Flex布局屬性詳解
一 flex布局是什麼？flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box 行內元素也可以使用flex布局。box webkit核心的瀏覽器，必須加上 webkit字首。box 注意，設為flex布局以後，子元素的f...
flex彈性布局屬性詳解！
詳細看下flex彈性布局具體屬性 flex容器屬性詳解 flex direction row column 橫排 豎排 決定元素的排列方向 flex wrap nowrap wrap wrap reverse 翻轉 排列不下時如何排，預設排不下就壓縮進行排 flex flow是 flex direc...
Flex彈性布局 屬性總結（一）
傳統布局的核心是盒子模型，依賴display屬性 position屬性 float屬性。可以看出來傳統布局非常容易實現像 word 左對齊，右對齊這樣的功能，可以說，傳統布局更適合於文字排版。但是，對於垂直居中這樣一些布局，以及響應式開發，雖說可以實現，但是卻不夠效率。使用flex布局則有這些優勢 ...