**測試：
flex-direction屬性決定主軸的方向（即專案的排列方向）。.box
1234預設情況下，專案都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
.box
nowrap（預設）：不換行。12
3456
7 wrap：換行，第一行在上方。12
3456
7 wrap-reverse：換行，第一行在下方。12
3456
7flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
.box
1234567
justify-content屬性定義了專案在主軸上的對齊方式。
.box
flex-start（預設值）：左對齊12
34flex-end：右對齊12
34center： 居中12
34space-between：兩端對齊，專案之間的間隔都相等。12
34space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。12
34align-items屬性定義專案在交叉軸上如何對齊。
.box
flex-start：交叉軸的起點對齊。12
34flex-end：交叉軸的終點對齊。12
34center：交叉軸的中點對齊。12
34baseline: 專案的第一行文字的基線對齊。12
34stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。12
34align-content屬性定義了多根軸線（多行）的對齊方式。如果專案只有一根軸線，該屬性不起作用。
.box
flex-start：交叉軸的起點對齊。12
3456
789 flex-end：與交叉軸的終點對齊。12
3456
789 center：與交叉軸的中點對齊。12
3456
789 space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。12
3456
789 space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。12
3456
789 stretch（預設值）：軸線佔滿整個交叉軸。12
3456
789order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
.item
1234 (order:-1)
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
.item
1 flex-grow: 1
2 flex-grow: 2
3 flex-grow: 1
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
負值對該屬性無效。
.item
1 flex-shrink: 0
23flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
.item
123flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
.item
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.item
123flex-end
4感謝阮一峰老師的教程href="">http://
效果展示：
flex的各種布局
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。設為flex布局以後，子元素的float clear和vertical align屬性將失效。任何乙個容器都可以指定為flex布局。box 一 有六個屬性設定在box父容器上，來控制子元素的顯示方式 分別是 f...
flex布局的屬性
flex布局的核心概念是軸和容器，容器包括外層的父容器和內層的子容器，軸包括主軸 預設水平 和交叉軸 預設垂直 一 開啟flex布局 父容器設定屬性值 display flex 若父容器為行內元素 display inline flex webkit核心的瀏覽器 display webkit fle...
flex屬性的學習
1.需要記住的屬性和值。方向橫和縱 flex direction row row reverse column column reverse 超過怎麼辦。flex wrap nowrap wrap wrap reverse 以上兩個的簡寫。flex flow 屬性是flex direction屬性和...