flexbox：更加優雅的Web佈局

flexbox layout是W3C爲了更好的在網頁中排版和佈局而設計出來的一個模塊。它用來能夠處理更加複雜的佈局。它本質是盒模型的延伸，它能夠進一步去規範容器中子元素盒模型之間的相對關係。

基礎知識點

flexbox盒子按照寬和高分出了main axis(主軸)和cross axis(和主軸交叉的軸)，盒子的上邊稱爲cross start,下邊稱爲cross end,左邊稱爲main start,右邊稱爲main end。

flexbox能夠解決什麼問題

徹底置中

在前端中實現置中是一件很頭疼的事情，尤爲是實現垂直置中，以前在一個老外的博客上看到一篇實現置中的七種方法，其中提到一種最簡單的方法就是使用transform，須要5行代碼能夠實現徹底置中。

下面看一下flexbox實現置中:

css.flex-container{
        display:flex;
        justify-content: center;
        align-items: center;
    }

flexbox只要3行代碼就能夠實現置中。

等高的卡片式佈局

在沒有用flexbox以前不少卡片設計的網站都有這樣一個問題，因爲卡片裏面的內容多少不一樣，而產生的不等高問題。

flexbox簡單的實現等高列：

css.flex-container{
        display:flex;
        align-items: stretch;
    }

flexbox能用在哪裏

兼容性

能夠看出flexbox從提出到如今也已經有了8個草案。flexbox更新了三種寫法。

caniuse上各個瀏覽器支持的狀況

稍微整理一下(這裏借用gitcafe的JaychSu的圖用一下)
從這裏能夠看出現代瀏覽器都支持最新的那個版本,只有IE10支持中間那個版本。

使用css預處理器定義的@mixin解決flexbox版本兼容

在github上有大神把flexbox三個版本搞成一個sass的@mixin,這樣能夠在須要的地方直接@include進來就能夠輕鬆解決三個版本的兼容問題。
sass關於flexbox的mixin的github項目地址

flexbox實現的原理邏輯

1. display（定義容器裏面爲flex文檔流）

• dislpay:flex使父容器表現爲塊盒子
• display:inline-flex使容器表現爲行盒子

2. flex

flex是flex-grow,flex-shrink,flex-basis的縮寫形式。默認值是0 1 auto。

3. flex-basis

flex-basis:flex-basis能夠理解爲咱們給子元素設置的寬度。默認值是auto,寬度設置爲auto時，盒子的寬度取決大家元素的寬度。

4. flex-grow和flex-shrink

grow和shrink是一對雙胞胎，grow表示伸張因子，shrink表示是收縮因子。

grow在flex容器下的子元素的寬度和比容器和小的時候起做用。 grow定義了子元素的寬度增加因子，容器中除去子元素之和剩下的寬度會按照各個子元素的gorw值進行平分加大各個子元素上。

公式：

1. 計算容器還剩空間

   available_space(容器還剩的空間）=container_size(容器寬度)-flex_item_total(子元素寬度之和)

2. 計算增加單位

   grow_unit(增加單位)=available_space/flex_grow_total(子元素增加因子之和)

3. 獲得子元素的寬度

   flex-item-width(子元素計算獲得的寬度)=flex-basis+grow-unit*flex-grow

上面例子的計算

container-size=480px;  flex-item-total=100*3=300px;flex-grow-total=3+2+1=6

available_space=480-300=180px;  

grow_unit=180/6=30px;

子元素1的寬度爲：

flex_item_width1=100+3*30=190px;

子元素2的寬度爲：

flex_item_width1=100+2*30=160px;

子元素3的寬度爲：

flex_item_width1=100+30=130px;

Codepen實例
shrink則是在寬度和比容器寬度大時候，纔有用。按照shrink的值減去相應大小獲得子元素的值。

公式：

overflow_space(溢出的寬度)

1. 計算溢出的寬度

   overflow-space=flex-item-total(子元素basis寬度之和)-container_width(容器寬度)

2. 獲得計算的子元素的寬度

   item-basis:子元素設置的flex-basis；item-shrink:子元素的flex-shrink；item-shrink-sum:全部子元素flex_shrink的和。     
   
   flex_item_width(計算的子元素的寬度)=item-basis --(overflow-space*(item-shrink/item-shrink-sum))

container-width=480px; item-shrink分別爲3，2，1.item-basis=200px;  overflow-space=120px;

則：

flex_item1_width=200-(120*(3/6))=140px;

flex_item2_width=200-(120*(2/6))=160px; 

flex_item3_width=200-(120*(1/6))=180px;

codepen實例查看

5. align-content

對單行和單列不起做用，多行時纔有效，需設置flex-direction:row;flex-wrap:wrap;或者flex-flow:row-wrap,對flex container中的行進行佈局排版。

• flex-start:行填充到容器的開始。
• flex-bottom:行填充到容器的結束。
• center:行居中分佈
• space-between:行平均分佈，第一行在容器開始，最後一行在容器結束。
• space-around:行平均分佈，但行與行之間有空隙。

實例截圖

codepen實例查看

6. align-items

用於當前行中的子元素進行對齊佈局。

• flex-start: 子元素的上邊緣對齊到行的上邊緣。
• flex-end: 子元素的上邊緣對齊到行的下邊緣。
• center: 以中軸線居中。
• baseline: 子元素的基線對齊。
• stretch:子元素拉伸至充滿容器。

實例截圖

codepen實例查看

7. align-self

應用在子元素上，能夠覆蓋align-item來得到特殊的元素對齊。

• flex-start: 子元素的上邊緣對齊到行的上邊緣。
• flex-end: 子元素的上邊緣對齊到行的下邊緣。
• center: 以中軸線居中。
• baseline: 子元素的基線對齊。
• stretch:子元素拉伸至充滿容器。

實例截圖

codepen實例查看

一個利用align-self來改變默認align-items排版的例子

codepen實例查看

8. justify-content

水平方向上佈局排版

• flex-start:子元素靠容器的左邊線對齊
• flex-end:子元素靠容器的右邊線對齊
• center: 子元素居中
• space-between: 子元素被平均分佈,第一子元素在容器最左邊，最後一個子元素在最右邊。
• space-around: 子元素平均分佈，但子元素與子元素之間有空隙。

實例截圖

codepen實例查看

9. order

用來改變子元素之間的排列循序，默認值是0，值越小，越往前排。

flexbox解決的一些問題。

• 優雅的實現響應式佈局。

codepen實例查看
* 最簡潔的實現媒體對象效果。（不須要浮動和建立BFC哦！）

codepen實例查看

關於flexbox的一些文章

• Solved by Flexbox
• A Complete Guide to Flexbox
• Flexbox adventures

原文：http://luxiaojian.me/2015/03/22/flexboxgeng-jia-you-ya-de-webbu-ju/