完全弄懂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相關的全部屬性。詳情能夠參考 阮一峯大神的博文，很詳細哦！

如今開始實戰，寫兩個經常使用的佈局。

一、圖文列表。

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

        <!--圖文列表-->
        <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}，達到左側圖片居右的效果

二、宮格佈局

        <!--宮格佈局-->
        <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,認識和理解都還不深入。隨着從此在工做中的頻繁使用，相信會有更多的發現和驚喜。