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

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

【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)，容器內(nèi)的子元素稱為伸縮項目(flex item)

[注意]瀏覽器會將任何直接在伸縮容器里的連續(xù)文字塊包起來成為匿名伸縮項目

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

[1]float、clear和vertical-align屬性在伸縮項目上沒有效果

[2]伸縮容器的margin與其內(nèi)容的margin不會重疊

[3]text-align屬性在伸縮容器上沒有效果，因為其只可應(yīng)用于塊級block容器

[4]另外，conlumns屬性伸縮容器上沒有效果

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

基本概念

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

[注意]主軸方向不一定是水平的，它主要取決于justify-content屬性

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

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

[注意]伸縮項目的main size和cross size主要由寬度或高度決定

伸縮容器以下6個屬性作用在伸縮容器上

伸縮流方向 flex-direction

伸縮流換行 flex-wrap

伸縮流(包括方向與換行) flex-flow

主軸對齊 justify-content

側(cè)軸對齊 align-items

堆棧伸縮行 align-content

【1】伸縮流方向:指定主軸的方向(即伸縮項目在伸縮容器中的排列方向)

[注意]伸縮流方向與direction和wrinting-mode有關(guān)系

【2】伸縮流換行:指定伸縮項目溢出伸縮容器時是否換行

[注意]此時，CSS允許使用overflow屬性來處理溢出內(nèi)容的顯示方式 　　

[注意]伸縮項目的排列順序同樣與direction和wrinting-mode有關(guān)系

【3】伸縮流:伸縮流方向與伸縮行換行的縮寫

【4】主軸對齊:用來設(shè)置伸縮容器當(dāng)前行伸縮項目在主軸方向的對齊方式，指定如何在伸縮項目之間分布伸縮容器額外空間

　　當(dāng)一行上的所伸縮項目不能伸縮或可伸縮已達(dá)到最大長度時，這一屬性才會對伸縮容器額外空間進(jìn)行分配。當(dāng)伸縮項目溢出某一行時，這一屬性也會在項目的對齊上施加一些控制

[注意]主軸對齊方式與direction、writing-mode、flex-flow都有關(guān)

【5】側(cè)軸對齊:用來設(shè)置伸縮容器當(dāng)前行在側(cè)軸方向的對齊方式

[注意]如果伸縮項目有width/height屬性將優(yōu)先于側(cè)軸對齊為拉伸的方式

[注意]側(cè)軸對齊方式與direction、writing-mode、flex-flow都有關(guān)

【6】堆棧伸縮行:指定多個伸縮項目行在側(cè)軸的對齊方式

[注意]該屬性只有在flex-wrap:wrap | wrap-reverse;且伸縮項目存在多行時才生效

　[注意]堆棧伸縮行與direction、writing-mode、flex-flow都有關(guān)

伸縮項目一個伸縮項目就是伸縮容器的一個子元素。伸縮容器中的文本也被視為一個伸縮項目。以下6個屬性設(shè)置在伸縮項目上。

自身側(cè)軸對齊方式 align-self

伸縮基準(zhǔn)值 flex-basis

擴(kuò)展比率 flex-grow

收縮比率 flex-shrink

伸縮性 flex

顯示順序 order

【1】自身側(cè)軸對齊方式:單個伸縮項目在側(cè)軸的對齊方式，該屬性可以覆蓋伸縮容器的側(cè)軸對齊方式

[注意]對于匿名伸縮項目，align-self的值永遠(yuǎn)與其關(guān)聯(lián)的伸縮容器的align-items的值相同

[注意]如果align-self的值為auto，則其計算值為伸縮項目的伸縮容器的align-items值

　　[注意]如果伸縮項目的任一個側(cè)軸上的外邊距為auto，則該伸縮項目在伸縮容器的剩余空間內(nèi)居中對齊，且align-self沒有效果。

【2】伸縮基準(zhǔn)值: 伸縮項目在主軸方向上的初始大小

如果flex-basis的值為0，表示伸縮項目在主軸方向上的初始大小為0，則分配所有空間；如果flex-basis的值為auto，表示伸縮項目在主軸方向上的初始大小為其本身的大小，則分配剩余空間

　　[注意]flex-basis的<length>值可以是一個數(shù)字后面跟著px、em等單位，也可以是一個百分?jǐn)?shù)，相對于其父伸縮容器的主軸長度

【3】擴(kuò)展比率: 當(dāng)伸縮容器的額外空間為正值時，此伸縮項目相對伸縮容器里其他伸縮項目能擴(kuò)展的空間比例

若flex-grow的值為0表示即使存在剩余空間也不放大；若所有項目的flex-grow屬性都為1，則它們將等分剩余空間(如果有的話)；若一個項目的flex-grow屬性為2，其他項目都為1，則前者占據(jù)的剩余空間將比其他項多一倍

【4】收縮比率:當(dāng)伸縮容器的額外空間為負(fù)值時，此伸縮項目相對于伸縮容器里其他伸縮項目能收縮的空間比例

如果所有項目的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

[注意]伸縮基準(zhǔn)值、擴(kuò)展比率和收縮比率都可以為小數(shù)，但不能為負(fù)數(shù)

【5】伸縮性:是擴(kuò)展比率、收縮比率和伸縮基準(zhǔn)值的縮寫

[注意]當(dāng)flex為關(guān)鍵字none或存在auto時，flex-basis為auto；若flex只有數(shù)字值，則flex-basis為0%；

【6】顯示順序: 定義伸縮項目的排列順序，數(shù)值越小，排列越靠前

　　[注意]伸縮容器中的伸縮項目默認(rèn)顯示順序是遵循文檔在源碼中出現(xiàn)的先后順序(HTML文檔的DOM結(jié)構(gòu)中的先后順序)

[注意]order的屬性值可以是負(fù)數(shù)，但不能是小數(shù)

以上這篇深入剖析CSS彈性盒模型flex就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/xiaohuochai/archive/2016/03/29/5323146.html

最新評論