文章來源：http://www.zhufengpeixun.cn/article/173
一、前言
Flexbox 是一個(gè) CSS3 的盒子模型 ( box model )，顧名思義它就是一個(gè)靈活的盒子 ( Flexible Box )，為什麼最近這個(gè)屬性才紅起來呢？最主要也是因?yàn)?CSS3 的規(guī)范終于普及 ( 或 IE 終于敗亡 )，加上行動(dòng)裝置的發(fā)展促成了響應(yīng)式布局興起，自適應(yīng)長寬彈性相當(dāng)大的 Flexbox 就趁勢而起了。
第一步要來看 Flexbox 的盒子模型，根據(jù) W3C 文章所描述，flex 的盒子模型如下圖所呈現(xiàn)，與一般的盒子模型不同的地方，在于 Flexbox 的盒子模型具有水平的起點(diǎn)與終點(diǎn) ( main start、main end )，垂直的起點(diǎn)與終點(diǎn) ( cross start、cross end )，水平軸與垂直軸 ( main axis、cross axis )，然后元素具有水平尺寸與垂直尺寸 ( main size、cross size )，這些都是相當(dāng)重要的布局規(guī)畫。
再來我們先看看 Flexbox 有哪些屬性，也可參考MDN的使用 CSS 彈性盒子
display
flex-direction
justify-content
align-items
align-self
align-content
flex-wrap
order
flex
