徹底弄懂css3的flex彈性盒模型

由於在日常工作中使用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;
            }

現在只是簡單的寫了個demo,認識和理解都還不深刻。隨着今后在工作中的頻繁使用，相信會有更多的發現和驚喜。