由於在日常工作中使用css或者bootstrap的柵格系統已經能很好的滿足業務需求，所以一直以來對css3的彈性佈局不是很感冒。

近日有幸在一篇文章中領略了flex的魅力--簡潔優雅。隨試之。

            /*容器*/
            .flex{
                display: flex;
                display: -webkit-flex;/*Webkit核心的瀏覽器，必須加上-webkit字首。*/
                /*注意，設為Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。*/
                flex-direction
 
: row;/*決定主軸的方向，即子專案（子元素）橫向排列還是縱向排列*/
                /*row（預設值）：主軸為水平方向，起點在左端。
                row-reverse：主軸為水平方向，起點在右端。
                column：主軸為垂直方向，起點在上沿。
                column-reverse：主軸為垂直方向，起點在下沿。*/
                flex-wrap:nowrap;/*定義如果一條軸線排不下，如何換行*/
                /*nowrap（預設）：不換行。
                wrap：換行，第一行在上方。
                wrap-reverse：換行，第一行在下方。
 
*/
                justify-content: flex-start;/*定義了專案在主軸上的對齊方式。*/
                /*flex-start（預設值）：左對齊
                flex-end：右對齊
                center： 居中
                space-between：兩端對齊，專案之間的間隔都相等。
                space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。*/
                align-items: flex-start
 
;/*定義專案在交叉軸上如何對齊。*/
                /*flex-start：交叉軸的起點對齊。
                flex-end：交叉軸的終點對齊。
                center：交叉軸的中點對齊。
                baseline: 專案的第一行文字的基線對齊。
                stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。*/
            }
            /*專案，容器裡的子元素預設成為專案，並擁有專案的預設屬性*/
            .flex-item{
                order:0;/*定義專案的排列順序。數值越小，排列越靠前，預設為0。*/
                flex-grow:0;/*定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。*/
                /*如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果一個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。*/
                flex-shrink:1;/*定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。*/
                flex-basis:auto;/*定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。*/
                flex:0 1 auto;/*flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。*/
                align-self:auto;/*允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性*/
            }

以上就是flex相關的所有屬性。詳情可以參考 阮一峰大神的博文，很詳細哦！

現在開始實戰，寫兩個常用的佈局。

1、圖文列表。

這是效果圖，下面開始上程式碼。

        <!--圖文列表-->
        <div class="container1">
            <div class="left"></div>
            <div class="right">
                <div class="title">帥舅舅</div>
                <div class="desc vertical-center">
                    <span>JavaScript全棧工程師成長中……</span>
                </div>
            </div>
        </div>

            .container1{
                display: flex;
                display: -webkit-flex;
                flex-direction: row;
                height: 50px;
            }
            .left{
                flex: 0 1 50px;
                background-color: lightblue;
            }
            .right{
                display: flex;
                display: -webkit-flex;
                flex-direction: column;
                flex: 1 1 auto;
            }
            .title{
                flex: 0 1 20px;
                background-color: lightcyan;
            }
            .desc{
                flex: 1 1 auto;
                background-color: lightgray;
                font-size: 12px;
                color: #666;
            }
            .vertical-center{/*彈性佈局實現垂直居中*/
                display: flex;
                display: -webkit-flex;
                flex-direction:column;
                justify-content:center;
            }

這裡有個技巧就是可以定義的排列順序.left{order:1}，達到左側圖片居右的效果

2、宮格佈局

        <!--宮格佈局-->
        <div class="container2">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>

            .container2{
                display: flex;
                display: -webkit-flex;
                flex-direction: row;/*決定主軸的方向*/
                flex-wrap:wrap;
            }
            .item{
                height: 100px;
                flex: 0 1 50%;
                background-color: lightcoral;
                color: white;
                font-size: 20px;
                text-align: center;
                line-height: 100px;
                border: 1px solid white;
                box-sizing: border-box;
            }