CSS3引入了一種新的布局模型——flex布局。flex是flexible box的縮寫，一般稱之為彈性盒模型。和CSS3其他屬性不一樣，flexbox并不是一個(gè)屬性，而是一個(gè)模塊，包括多個(gè)CSS3屬性。flex布局提供一種更加有效的方式來(lái)進(jìn)行容器內(nèi)的項(xiàng)目布局，以適應(yīng)各種類型的顯示設(shè)備和各種尺寸的屏幕

版本更迭 flexbox布局的語(yǔ)法規(guī)范經(jīng)過(guò)幾年發(fā)生了很大的變化。從2007年07月，flex第一版本的工作草案發(fā)布，到2012年09月，flex最新版本成為候選推薦。flex主要經(jīng)歷了三個(gè)版本

【1】舊版本 display:box | inline-box;

該版本IE瀏覽器不支持，且其他瀏覽器和移動(dòng)端都需要添加前綴，但移動(dòng)端可以兼容到andriod2.1和ios3.2

【2】混合版本 display:flexbox | inline-flexbox;

該版本只有IE10支持，且需要添加前綴-ms-

【3】新版本 display: flex | inline-flex

該版本兼容IE11+、firefox、safari、chrome、opera及移動(dòng)端，但移動(dòng)端ios7.1-8.4需要添加前綴-webkit-

display要讓一個(gè)元素變成伸縮容器，需要使用display屬性。采用flex布局的元素，稱為伸縮容器(flex container)，容器內(nèi)的子元素稱為伸縮項(xiàng)目(flex item)

使用flex布局實(shí)現(xiàn)上是使元素FFC化(flex formatting context伸縮格式化上下文)，F(xiàn)FC是普通流的一種。而浮動(dòng)流和定位流以及CSS其他屬性對(duì)FFC是有影響的，主要表現(xiàn)在以下幾點(diǎn):

彈性盒模型的兩種容器塊級(jí)伸縮容器和內(nèi)聯(lián)伸縮容器的區(qū)別類似于block和inline-block的區(qū)別，一個(gè)獨(dú)占一行，另一個(gè)非獨(dú)占一行

XML/HTML Code復(fù)制內(nèi)容到剪貼板

//彈性盒模型: 塊級(jí)伸縮容器 | 內(nèi)聯(lián)伸縮容器   
//新版本   
display: flex | inline-flex;   
//混合版本   
display: flexbox | inline-flexbox;   
//舊版本   
display: box | inline-box;  

基本概念

伸縮容器默認(rèn)存在兩條軸: 水平的主軸(main axis) 和垂直的側(cè)軸(cross axis)

主軸起點(diǎn)叫main start，主軸終點(diǎn)叫main end；側(cè)軸起點(diǎn)叫cross start，側(cè)軸終點(diǎn)叫cross end

伸縮項(xiàng)目默認(rèn)沿主軸排列。單個(gè)伸縮項(xiàng)目占據(jù)的主軸空間叫main size ，占據(jù)的側(cè)軸空間叫cross size