flex是flexible box的縮寫，意為彈性佈局。用來為盒模型提供最大的靈活性。任何一個容器都可以通過設定display為flex或inline-flex將其指定為flex佈局。設定flex佈局之後，子元素的float、clear和vertical-align屬性將失效。
採用flex佈局的元素稱為flex容器，而其所有子元素稱為flex專案。容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。軸的起始和結束為止分別稱作main/cross start和main/cross end。專案預設沿主軸排列，專案佔據的軸的空間叫main/cross size。詳見下圖：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1.1 flex-direction屬性
該屬性定義主軸的方向，即專案的排列方向。value的取值包括：row，row-reverse，column，column-reverse，其中row是預設值，水平方向（起點在左端），column是垂直方向（起點在頂端），帶-reverse的值則表示反方向。用法及效果如下：
html程式碼

<div class="flex-box">
    <div class="flex-item">item1</div>
    <div class="flex-item">item2</div>
    <div class="flex-item">item3</div>
</div>

css程式碼

.flex-box{
        background:orange;
        display: flex;     /*定義為flex佈局*/
        flex-direction
 
:row-reverse; /*主軸為水平方向，起點在右端*/
    }
.flex-item{
    margin:10px;
    height:100px;
    width:100px;
    background: purple;
    color:#fff;
}

效果圖：

1.2 flex-wrap屬性
該屬性定義專案是否換行並且如何換行。在預設情況下，專案都排在一條軸線上，如果一條軸線排不下，瀏覽器就根據這個屬性的值對專案排列作出調整。value的取值包括：nowrap，wrap，wrap-reverse，其中，nowrap是預設值，不換行。用法及效果如下：

.item-class{
    flex-grow:1;
}

效果圖：

說明：wrap表示換行，第一行在上方。使用row-reverse換行時，第一行在下方，亦即圖中item6會出現在第一行。

1.3 flex-flow屬性
該屬性是flex-direction和flex-wrap的簡寫形式，預設值為row nowrap。使用方式如下：

.flex-item{
    flex-flow:colunm wrap;
}

1.4 justify-content屬性
該屬性定義了專案在主軸上（main axis）的對齊方式。value的取值包括：

• flex-start：預設值。軸的起始端（main/cross start）
• flex-end：軸的終點端
• center：居中
• space-between：兩端對齊，專案之間的間隔都相等。
• space-around：每個專案兩側的間隔相等。那麼專案之間的間隔就是專案與邊框之間的間隔的兩倍。用法及效果如下：

.flex-item{
    justify-content:space-between;
}

效果圖：


說明：這些屬性對專案的作用是根據主軸的方向不同而改變的，如果將direction設定為column，那麼這些效果則表現在縱向。

1.5 align-items屬性
該屬性定義專案在交叉軸上的對齊方式。value的取值包括：

• flex-start：交叉軸的起點對齊
• flex-end：交叉軸的終點對齊
• center：居中
• baseline：以專案的第一行文字的基線對齊
• stretch：預設值，如果專案未設定高度或設為auto，那麼專案將佔滿整個容器的高度。
  用法及效果如下：

.flex-item{
    align-items:baseline;
}

效果圖：

1.6 align-content屬性
該屬性定義了多個軸線的對齊方式。value的取值包括：
- flex-start：與交叉軸的起點對齊
- flex-end：與交叉軸的終點對齊
- center：交叉軸上居中
- space-between：交叉軸上兩端對齊，軸線之間的間隔兩端分佈
- space-around：每個軸線兩側的間隔都相等。那麼，軸線之間的間隔是軸線與邊框之間間隔的兩倍
- stretch：預設值，軸線佔滿整個交叉軸
咦！怎麼都這麼熟悉呢？對比原來發現這個屬性的取值是跟前兩個屬性的取值有很大相似的。但它們其的效果還是有區別的。看圖：

對比下align-items裡面的center，是不是發現不同呢？每一行專案之間的距離變小了！是變小了嗎？其實是軸線居中了！在這裡，因為專案的換行，形成了多條軸線，而align-content就是作用在軸線上的，所以它會讓每一條軸線居中。而align-items是將所有的專案看做一個整體，即使專案換行，也是將整個專案看做是一條軸線，最後將這個整體居中。

關於flex佈局中的容器屬性在這裡就介紹完了，由於flex佈局的知識點較多，因此沒有在一篇博文中將其詳細介紹完，剩下的flex佈局中的專案屬性大家可以參考博文《細說css3 flex佈局值flex容器屬性》。

未完待續·······