今天看了一下天貓移動(dòng)端的首頁，發(fā)現(xiàn)天貓用的是flex布局。所以特地又整理了一下flex布局的知識(shí)點(diǎn)。

Flex布局是W3C在2009年提出來的，可以簡便，完整，響應(yīng)式的實(shí)現(xiàn)各種頁面布局。目前已經(jīng)得到了所有瀏覽器的支持。包括IE10+，safari6.1+，F(xiàn)ireFox22+，Chrome21+

Flex叫做彈性盒子布局。用來為盒裝模型布局提供最大的靈活性。

任何一個(gè)容器都可以被指定為flex布局

    .box{
        display:flex;
    }

行內(nèi)元素也可以使用flex布局

    .box{
        display:inline-flex;
    }

Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴

    .box{
        display:-webkit-flex;
        display:flex;
    }

設(shè)為flex布局后，子元素的float，clear，vertical-align屬性將失效

容器

對于容器而言，即display被設(shè)置為flex的盒子來說。
我們可以用以下幾個(gè)屬性來控制。

flex-direction

這個(gè)屬性決定主軸的方向，即容器內(nèi)部的子元素的排布方向。在這里明確什么叫交叉軸。如果主軸橫向，那么交叉軸就是縱向。反之亦然。

    .box{
        flex-direction:row | row-reverse | column | column-reverse;
    }

其中row是默認(rèn)值，即不設(shè)定這個(gè)屬性的話，默認(rèn)是縱向排列的。

flex-wrap

這個(gè)屬性表示在一條軸線上排不開了，應(yīng)該怎么換行

    .box{
        flex-wrap:nowrap | wrap | wrap-reverse;
    }

其中nowrap表示不換行，這個(gè)是默認(rèn)值
wrap表示換行，且第一行在上方
wrap-reverse表示換行，且第一行在下方

flex-flow

這個(gè)屬性是以上兩個(gè)屬性的簡寫形式，即flex-direction和flex-wrap的簡寫形式
默認(rèn)值為row nowrap

justify-content

這個(gè)屬性表示了子元素在主軸上的對其方式

    .box{
        justify-content:flex-start | flex-end | center | space-between | space-around;
    }

flex-start左對齊，這個(gè)是默認(rèn)值
flex-end右對齊
center 居中
space-between 兩端對齊，子元素之間的間距相等
space-around 每個(gè)子元素兩側(cè)的間隔相等，所以，子元素之間的間隔比項(xiàng)目與邊框的間隔大一倍

align-items

這個(gè)屬性表示子元素在交叉軸上如何對齊

    .box{
        align-items:flex-start | flex-end | center | baseline | stretch;
    }

flex-start表示交叉軸起點(diǎn)對齊
flex-end表示交叉軸終點(diǎn)對齊
center 表示交叉軸的中點(diǎn)對齊
baseline 表示子元素的第一行文字的基線對齊
stretch 如果項(xiàng)目未設(shè)置高度或者auto，那么將占滿整個(gè)容器的高度，這個(gè)是默認(rèn)值

align-content

這個(gè)屬性定義了多根軸線的對齊方式，如果項(xiàng)目只有一根軸線，該屬性不起作用。這就相當(dāng)于所有子元素的整體相對于容器的位置。

    .box{
        align-content:flex-start | flex-end | center | space-between | space-around | stretch;
    }

flex-start表示與交叉軸的起點(diǎn)對齊
flex-end與交叉軸的終點(diǎn)對齊
center 與交叉軸的中點(diǎn)對齊
space-between 與交叉軸兩端對齊，軸線之間的間隔平均分布
space-around 每根軸線兩側(cè)的間隔都相等，所以軸線之間的間隔比軸線與邊框的間隔大一倍
stretch （默認(rèn)值）軸線占滿整個(gè)交叉軸

子元素的屬性

order

這個(gè)屬性表示子元素的排列順序，數(shù)值越小，排列越靠前，默認(rèn)值為0

    .item{
        order:<integer>;
    }

flex-grow

這個(gè)屬性定義子元素的放大比例，默認(rèn)為0.即存在剩余空間，也不放大。

    .item{
        flex-grow:<number>;
    }

當(dāng)所有子元素的flew-grow屬性為1，則它們等分剩余空間。如果一個(gè)子元素的flex-frow為2，其他子元素都為1，那么前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。

flex-shrink

這個(gè)屬性定義了子元素的縮小比例。默認(rèn)值為1.即，空間不足的時(shí)候，該項(xiàng)目將縮小。

    .item{
        flex-shrink:<number>;
    }

如果所有的子元素的flex-shrink屬性都為1，那么當(dāng)空間不足的時(shí)候，都將等比例縮小。如果一個(gè)子元素的flex-shrink屬性為0，其他項(xiàng)目為1，那么當(dāng)空間不足時(shí)，前者不縮小。

flex-basis

這個(gè)屬性表示在分配多余空間之前，子元素占據(jù)的主軸空間。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即子元素的本來大小。

    .item{
        flex-basis:<length> | auto;
    }

它可以設(shè)置的和width，height屬性一樣的值，則項(xiàng)目將占據(jù)固定空間。

flex

這個(gè)屬性是flex-grow，flex-shrink，flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。
該屬性有兩個(gè)快捷屬性 auto(1 1 auto) 和 none(0 0 auto)
建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。

align-self

這個(gè)屬性允許單個(gè)子元素可以和其他子元素有不一樣的對齊方式，可以覆蓋align-item屬性。默認(rèn)值為auto，表示繼承容器的align-item的值、如果沒有父元素，等同于stretch

    .item{
        align-self:auto | flex-start | flex-end | center | baseline | stretch;
    }

每個(gè)值表示什么，參照align-item

以上介紹完了理論知識(shí)，下面看天貓移動(dòng)端首頁的一個(gè)模塊吧。
我們將介紹下圖所示模塊的實(shí)現(xiàn)

天貓的模塊

HTML的代碼如下

<div class="module-con topNav">
    <ul class="mui-flex">
        <li>
            <a href="">
                <img src="images/pic.jpg" width="36" height="36">
                <span>我是文字</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/pic.jpg" width="36" height="36">
                <span>我是文字</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/pic.jpg" width="36" height="36">
                <span>我是文字</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/pic.jpg" width="36" height="36">
             <span>我是文字</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/pic.jpg" width="36" height="36">
               <span>我是文字</span>
            </a>
        </li>
    </ul>
</div>

sass的代碼如下
關(guān)于sass的介紹，我之前的文章有提及，sass傳送門

.mui-flex{display: flex;}
.topNav li{
    flex:auto;
    a{
        display:block; margin:4px; padding: 4px; text-align:      center;
        img{
            display:block; margin:0 auto 5px;
        }
    span{
         display:block;width: 100%; line-height: 20px;     text-align: center;}
    }
}