今天，本文會以盡量精簡的文字來介紹Flexbox，代碼示例會比以往少很多，因為要全面講述，估計十篇文章都講不完……
一、什么是Flexbox?
Flexbox，又叫彈性盒子布局。簡單來說，它是一種CSS快速布局方式，相比于傳統(tǒng)文檔流布局方式，具有簡潔、高效和響應(yīng)式等優(yōu)點。
二、為什么要使用Flexbox?
1、超簡潔語法
就說元素水平垂直居中布局這個經(jīng)典難題吧！ 這個問題其實在我之前的純CSS七大居中方法這篇文章中已經(jīng)總結(jié)過，其中最后兩個方法就是用的Flexbox，尤其是最后一個，就兩句代碼，相比于傳統(tǒng)布局，簡單到不好意思~~
父元素：display: flex;
子元素：margin: auto;
2、響應(yīng)式布局
比如要將一個盒子分成三等分，可以這樣寫：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
ul{ display: flex; width: 300px;}
ul li{ flex: 1; height: 100px;}
是不是很簡潔？而且比直接寫width: 33.33%精確多了吧。
三、開始學(xué)習(xí)Flexbox
1、Flexbox模型
大家在中學(xué)階段都學(xué)過直角坐標(biāo)系，它是由垂直的橫軸和縱軸構(gòu)成，橫軸方向向右，縱軸方向向上。而今天所要講的Flexbox與此極為相似，它也是由垂直的兩條軸構(gòu)成，只不過一條叫做主軸，另一條叫做交叉軸（垂直與主軸），圖示如下：
Flexbox模型（flex-direction: row）
默認(rèn)情況下主軸就是橫軸，方向水平向右，交叉軸就是縱軸，方向豎直向下。具體用法，我們接著往下看。
2、Flexbox眾多屬性的作用范圍
設(shè)置父容器的屬性有：
