CSS3引入了一種新的布局模型——flex布局。flex是flexible box的縮寫，一般稱之為彈性盒模型。和CSS3其他屬性不一樣，flexbox并不是一個屬性，而是一個模塊，包括多個CSS3屬性。flex布局提供一種更加有效的方式來進行容器內的項目布局，以適應各種類型的顯示設備和各種尺寸的屏幕
版本更迭 flexbox布局的語法規范經過幾年發生了很大的變化。從2007年07月，flex第一版本的工作草案發布，到2012年09月，flex最新版本成為候選推薦。flex主要經歷了三個版本
【1】舊版本 display:box | inline-box;
該版本IE瀏覽器不支持，且其他瀏覽器和移動端都需要添加前綴，但移動端可以兼容到andriod2.1和ios3.2
【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的區別，一個獨占一行，另一個非獨占一行
XML/HTML Code復制內容到剪貼板
//彈性盒模型: 塊級伸縮容器 | 內聯伸縮容器
//新版本
display: flex | inline-flex;
//混合版本
display: flexbox | inline-flexbox;
//舊版本
display: box | inline-box;
基本概念
伸縮容器默認存在兩條軸: 水平的主軸(main axis) 和垂直的側軸(cross axis)
[注意]主軸方向不一定是水平的，它主要取決于justify-content屬性主軸起點叫main start，主軸終點叫main end；側軸起點叫cross start，側軸終點叫cross end
伸縮項目默認沿主軸排列。單個伸縮項目占據的主軸空間叫main size ，占據的側軸空間叫cross size
新聞熱點
疑難解答
