前面的話
CSS3引入了一種新的佈局模型——flex佈局。flex是flexible box的縮寫，一般稱之爲彈性盒模型。和CSS3其他屬性不一樣，flexbox並不是一個屬性，而是一個模塊，包括多個CSS3屬性。flex佈局提供一種更加有效的方式來進行容器內的項目佈局，以適應各種類型的顯示設備和各種尺寸的屏幕
版本更迭
flexbox佈局的語法規範經過幾年發生了很大的變化。從2007年07月，flex第一版本的工作草案發布，到2012年09月，flex最新版本成爲候選推薦。flex主要經歷了三個版本
【1】舊版本 display:box | inline-box;
IE瀏覽器不支持，windows下的safari瀏覽器只支持舊版本的寫法且需要添加前綴，移動端可以兼容到andriod2.1-4.3和ios3.2-6.1也需要添加前綴
【2】混合版本 display:flexbox | inline-flexbox;
該版本只有IE10支持，且需要添加前綴-ms-
【3】新版本 display: flex | inline-flex
該版本兼容IE11+、firefox、safari、chrome、opera及移動端，但移動端ios7.1-8.4需要添加前綴-webkit-
display
要讓一個元素變成伸縮容器，需要使用display屬性。採用flex佈局的元素，稱爲伸縮容器(flex container)，容器內的子元素稱爲伸縮項目(flex item)
[注意]瀏覽器會將任何直接在伸縮容器裏的連續文字塊包起來成爲匿名伸縮項目
使用flex佈局實現上是使元素FFC化(flex formatting context伸縮格式化上下文)，FFC是普通流的一種。而浮動流和定位流以及CSS其他屬性對FFC是有影響的，主要表現在以下幾點:
[1]float、clear和vertical-align屬性在伸縮項目上沒有效果
[2]伸縮容器的margin與其內容的margin不會重疊
[3]text-align屬性在伸縮容器上沒有效果，因爲其只可應用於塊級block容器
[4]另外，conlumns屬性伸縮容器上沒有效果
彈性盒模型的兩種容器塊級伸縮容器和內聯伸縮容器的區別類似於block和inline-block的區別，一個獨佔一行，另一個非獨佔一行
//彈性盒模型: 塊級伸縮容器 | 內聯伸縮容器 //新版本 display: flex | inline-flex; //混合版本 display: flexbox | inline-flexbox; //舊版本 display: box | inline-box;