前端開發人員在開發頁面的時候，必定會涉及到一面佈局。好像現在的頁面佈局方法大致有兩種，一種是傳統的盒子模型（margin、border、padding、content）；另外一種是比較新興的技術FlexBox彈性盒子模型。

▍傳統盒子模型

傳統盒子模型就是由外邊距（margin）、邊框（border）、內邊距（padding）以及內容（content）組成。示意圖如下：

利用這種盒子模型能完成大部分的頁面佈局，但是對於一些特殊的頁面佈局，這種傳統的盒子模型實現起來非常的不方便，比如垂直居中等等。

▍FlexBox彈性盒子模型

Flex佈局，可以簡便、完整、響應式地實現各種頁面佈局。

具體flex使用方法可參考這兩個教程：菜鳥教程、冰川的部落格。

【注意】設為Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。

▍示例：將DIV三等分

一般使用的方法不外乎4種：百分比（浮動（float）+百分比、行內元素（inline-block）+百分比）、display:table+display:table-cell、flex佈局、bootstrap柵格系統。這裡簡述使用百分比和flex佈局兩種方法：

HTML如下：

<div class="father">
    <div class="child child-first"></div>
    <div class="child child-second"></div>
    <div class="child child-third"></div>
</div>
 

1、百分比

.father{
    width: 400px;
    height: 150px;
    background-color: black;
}

.child{
    float: left;
    width: 33.3%;
    height: 150px;
}

.child-first{
    background-color: red;
}

.child-second{
    background-color: blue;
}

.child-third{
    background-color: yellow;
}

效果如下

粗看好像是達到效果了，但是一旦將頁面放大就露出馬腳了，在最右側暴露出了一個黑色塊

33.3%*3=99.9%，並沒有完全真正的佔滿整個父元素，這可能造成一些不必要的隱患。

2、flex佈局

.father{
    display: flex;
    width: 400px;
    height: 150px;
    background-color: black;
}

.child{
    flex: 1;
    height: 150px;
}

.child-first{
    background-color: red;
}

.child-second{
    background-color: blue;
}

.child-third{
    background-color: yellow;
}

無論放大還是縮小，底部的黑色塊都完全被遮蓋住了。

▍結語

FlexBox彈性盒子模型比傳統盒子模型更為精巧一些。