[轉]關於flexbox

 

Flexbox，一種CSS3的佈局模式，也叫作彈性盒子模型，用來爲盒裝模型提供最大的靈活性。

 

首先舉一個栗子，以前咱們是這樣實現一個div盒子水平垂直居中的。在知道對象高寬的狀況下，對居中元素絕對百分比定位，而後經過margin偏移的方式來實現。

 

<style>

    .container{

        width: 600px;

        height: 400px;

        border: 1px solid #000;

        position: relative;

    }

    .box{

        width: 200px;

        height: 100px;

        border: 1px solid #000;

        position: absolute;

        left: 50%;

        top: 50%;

        margin-left: -100px;

        margin-top:-50px;

    }

</style>

<div class="container">

    <div class="box"></div>

</div>

假如使用了flex後，實現起來就簡單了，並且不須要本身去算，也不須要絕對定位，只須要經過對伸縮容器定義兩個屬性，justify-content定義伸縮項目沿着主軸線的對齊方式爲center， align-items定義伸縮項目在側軸（垂直於主軸）的對齊方式爲center，具體以下：

 

<style>

 .container{

     width: 600px;

     height: 400px;

     border: 1px solid #000;

     display: flex;

     justify-content:center;

     align-items:center;

 

 }

 .box{

     width: 200px; //寬度能夠爲任意

     height: 100px; //高度能夠爲任意

     border: 1px solid #000;

 

 }

</style>

<div class="container">

    <div class="box"></div>

</div>

其實Flexbox的優秀特性並非這一些，首先來一張它的屬性圖吧~

 

首先咱們來分析下這一張圖，從第一個子節點能夠看到Flexbox由Flex容器和Flex項目組成，容器即父元素，項目即子元素。他們之間的一些關係能夠這樣來表示：

 

 

這張圖能夠在接下來的屬性分析中用到。

 

 

Flex容器

 

display:flex

 

當咱們使用flexbox佈局時候，須要先給父容器的display值定位flex（塊級）或者inline-flex（行內級）。

 

當使用了這個值之後，伸縮容器會爲內容創建新的伸縮格式化上下文（FFC），它的上下文展現效果和BFC根元素相同（BFC特性：浮動不會闖入伸縮容器，且伸縮容器的邊界不會與其內容邊界疊加）。

 

伸縮容器不是塊容器，所以有些設計用來控制塊佈局的屬性，在伸縮佈局中不適用，特別是多欄（column)，float，clear，vertical-align這些屬性。

 

flex-direction

 

[flex-direction]屬性用來控制上圖中伸縮容器中主軸的方向，同時也決定了伸縮項目的方向。

 

flex-direction:row;也是默認值，即主軸的方向和正常的方向同樣，從左到右排列。

 

flex-direction:row-reverse;和row的方向相反，從右到左排列。

 

flex-direction:column;從上到下排列。

 

flex-direction:column-reverse;從下到上排列。以上只針對ltr書寫方式，對於rtl正好相反了。

 

網頁展現效果以下：

 

 

flex-warp

 

[flex-wrap]屬性控制伸縮容器是單行仍是多行，也決定了側軸方向（新的一行的堆放方向）。

 

flex-wrap:nowrap;伸縮容器單行顯示，默認值；

 

flex-wrap:wrap;伸縮容器多行顯示；伸縮項目每一行的排列順序由上到下依次。

 

flex-wrap:wrap-reverse;伸縮容器多行顯示，可是伸縮項目每一行的排列順序由下到上依次排列。

 

網頁效果見圖；

 

 

flex-flow

 

[flex-flow]屬性爲flex-direction（主軸方向）和flex-wrap（側軸方向）的縮寫，兩個屬性決定了伸縮容器的主軸與側軸。

 

flex-flow:flex-direction;默認值爲row nowrap；

 

舉兩個栗子：

 

flex-flow:row;也是默認值；主軸是行內方向，單行顯示，不換行；

 

flex-flow:row-reverse wrap;主軸和行內方向相反，從右到左，項目每一行由上到下排列（側軸）。

 

網頁效果以下：

 

 

這裏你們能夠多本身去試試不一樣的組合。

 

justify-content

 

[justify-content]用於定義伸縮項目在主軸上面的的對齊方式，當一行上的全部伸縮項目都不能伸縮或可伸縮可是已經達到其最大長度時，這一屬性纔會對多餘的空間進行分配。當項目溢出某一行時，這一屬性也會在項目的對齊上施加一些控制。

 

justify-content:flex-start;伸縮項目向主軸的起始位置開始對齊，後面的每元素緊挨着前一個元素對齊。

 

justify-content:flex-end;伸縮項目向主軸的結束位置對齊，前面的每個元素緊挨着後一個元素對齊。

 

justify-content:center;伸縮項目相互對齊並在主軸上面處於居中，而且第一個元素到主軸起點的距離等於最後一個元素到主軸終點的位置。以上3中都是「捆綁」在一個分別靠左、靠右、居中對齊。

 

justify-content:space-between;伸縮項目平均的分配在主軸上面，而且第一個元素和主軸的起點緊挨，最後一個元素和主軸上終點緊挨，中間剩下的伸縮項目在確保兩兩間隔相等的狀況下進行平分。

 

justify-content:space-around;伸縮項目平均的分佈在主軸上面，而且第一個元素到主軸起點距離和最後一個元素到主軸終點的距離相等，且等於中間元素兩兩的間距的一半。完美的平均分配，這個佈局在阿里系中很常見。

 

仍是看demo理解起來快一點：

 

 

align-items

 

[align-items]用來定義伸縮項目在側軸的對齊方式，這相似於[justify-content]屬性，可是是另外一個方向。（flex-directon和flex-wrap是一對，justify-content和align-items是一對，前者分別定義主軸和側軸的方向，後者分別定義主軸和側軸中項目的對齊方式）。

 

align-items:flex-start;伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起點的邊。

 

align-items:flex-end;伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點的邊。

 

align-items:center;伸縮項目的外邊距在側軸上居中放置。

 

align-items:baseline;若是伸縮項目的行內軸與側軸爲同一條，則該值與[flex-start]等效。 其它狀況下，該值將參與基線對齊。

 

align-items:stretch;伸縮項目拉伸填充整個伸縮容器。此值會使項目的外邊距盒的尺寸在遵守「min/max-width/height」屬性的限制下儘量接近所在行的尺寸。

 

下面demo只展現center和stretch的栗子，其餘幾個能夠參考flex-start和flex-end那樣。

 

 

align-content

 

[align-content]屬性能夠用來調準伸縮行在伸縮容器裏的對齊方式，這與調準伸縮項目在主軸上對齊方式的[justify-content]屬性相似。只不過這裏元素是以一行爲單位。請注意本屬性在只有一行的伸縮容器上沒有效果。當使用flex-wrap:wrap時候多行效果就出來了。

 

align-content: flex-start || flex-end || center || space-between || space-around || stretch;

align-content: stretch;默認值,各行將會伸展以佔用剩餘的空間。

 

其餘能夠參考[justify-content]用法。

 

具體圖片來至http://w3.org官方文檔；

 

 

太麻煩。寫不下去了，摔。

 

Flex項目

 

終於寫到關於伸縮項目的相關屬性了，主要是3個，order，flex（flex-grow，flex-shrink，flex-basis的組合），align-self；用來比較多的是前兩個。

 

order

 

order控制伸縮項目在伸縮容器中的顯示順序，伸縮容器中伸縮項目從序號最小的開始佈局，默認值是0。

有一種用法比較多，想設置一組中有兩個元素一個排第一，另一個排最後，主須要將第一個的order:-1；另外一個爲order:0;這樣就行了。

 

譬如咱們想控制一個container中有4個box，想box4爲一個顯示，box1爲最後一個顯示。只須要這樣

 

<style>

.container{

        display: flex;

    }

    .box1{

        order:1;

    }

    .box4{

        order:-1;

    }

</style>

<div class="container">

    <div class="box1">1</div>

    <div class="box2">2</div>

    <div class="box3">3</div>

    <div class="box4">4</div>

</div>

顯示效果就這樣了：

 

 

flex

 

[flex]屬性能夠用來指定可伸縮長度的部件，是flex-grow（擴展比例）,flow-shrink（收縮比例）,flex-basis（伸縮基準值）這個三個屬性的縮寫寫法，建議你們採用縮寫的方式而不是單獨來使用這3個屬性。

 

flex:none | [ <'flex-grow'> ?<'flew-shrink'> || <'flow-basis'>]

// flex-grow是必須得flex-shrink和flow-basis是可選的

flex-grow:<number>;其中number做爲擴展比例，沒有單位，初始值是0，主要用來決定伸縮容器剩餘空間按比例應擴展多少空間。

 

flex-grow:<number>;其中number做爲收縮比例，沒有單位，初始值是1，也就是剩餘空間是負值的時候此伸縮項目相對於伸縮容器裏其餘伸縮項目能收縮的空間比例，在收縮的時候收縮比率會以[flex-basis]伸縮基準值加權。

 

flex-basis:<length>|auto;默認是auto也就是根據可伸縮比率計算出剩餘空間的分佈以前，伸縮項目主軸長度的起始數值。若在「flex」縮寫省略了此部件，則「flex-basis」的指定值是長度零。

 

flex-basis用圖來表示就是這樣：

 

 

align-self

 

[align-self]用來在單獨的伸縮項目上覆寫默認的對齊方式，這個屬性是用來覆蓋伸縮容器屬性align-items對每一行的對齊方式。也就是說在默認的狀況下這兩個值是相等的。

 

align-self: auto | flex-start | flex-end | center | baseline | stretch

個人見解

 

講了這麼多他們的使用，咱們來看一看flexbox佈局的兼容性。

 

具體你們能夠見這個網站：caniuse

 

 

在PC端其實很樂觀了，基本上主流的瀏覽器都已經兼容了flex的使用，可是到了移動端就不是那麼好了，特別是國內瀏覽器，考慮到uc瀏覽器佔了大頭，可是uc從圖中看到只兼容flex最老的一個版本，也就是2009年的版本，即display:box;不少如今flex的優秀特性到了它上面都不兼容了，因此建議你們在使用的時候，假如2009版本能夠知足開發要求的話，仍是去使用2009版本，這樣風險更小。

 

可是假如想兼容多個瀏覽器，能夠採用優雅降級的方式來使用，這裏推薦一個scss的sass-flex-mixin,這樣就可使用最新的寫法，而且兼容大部分瀏覽器了。

 

 

相信flexbox佈局在之後的移動端會用得愈來愈多的。

 

轉載：TW93—知乎專欄--我對Flexbox佈局模式的理解