CSS3——彈性盒模型-flex——等分布局、流式布局、聖杯布局

1.等分布局：

中間固定兩邊自適應：

固定兩個，一個自適應

2.流式布局：

   模仿float浮動布局

3.聖杯布局：（自適應布局）

 先來看一下結構布局：

    <div class="wrapper">
        <div class="headr">導航欄，頭部，搜索框</div>
        <div class="contain">
            <div class="left">物品分類</div>
            <div class="center">廣告內容</div>
            <div class="right">登錄</div>
        </div>
        <div class="footer">尾部</div>
    </div>