引言
css3中的 flexible box，或者叫flexbox，是用於排列元素的一種布局模式。
顧名思義，彈性布局中的元素是有伸展和收縮自身的能力的。 相比於原來的布局方式，如float、position，根據盒子模型，就可以計算出元素的展示尺寸（長寬非百分比），除非溢位，否則不依賴於父容器的大小。
而彈性布局中元素的大小是高度依賴父容器的大小的。因為，它所具有的「伸縮性」，目標就是為了撐滿父元素。當然這是在任其「野蠻生長」的情況下，你也可以通過相關css屬性控制其是否撐滿、撐滿什麼軸。
彈性布局是一種全新的思維方式，讓很多實現複雜的問題有了更好的理解方式（如垂直居中）。只需要給直接父容器設定為display: flex;，duang~ 子元素就預設具有了可收縮性。
flex的語法規範也曾經有很多版本：
本篇文章側重於flex難理解的點，適合於已經了解過flex的api的童鞋**。（api其實就下圖這麼多，橙色是常用的）
為何要引入主軸、交叉軸、軸線的概念
我們首先看一下，css布局的發展歷程：
翻開flex的入門教程，首先映入眼簾且比較難懂的就是主軸和交叉軸（對，就是下面這張圖），這是前幾種布局方式都沒有的。
前幾種布局都可以按照人類書寫的方式理解：「從左到右寫，寫不下就往下換行」。
但是flex特點是可以重新定義這種「書寫方式」，你還可以從下到上寫、從右到左寫（見flex-direction屬性），換行也可以從兩個相反的方向換行（見flex-wrap屬性）。所以引入了這個幾個概念方便理解。
瀏覽器的布局方式是：
沿著主軸的方向依次排列，如果要換行，則沿著交叉軸的方向進行換行，每行代表一條軸線。但是，我們可以使用子元素的order屬性對元素進行重新排序。由此可見，flex給子元素提供了很大的靈活性。
主軸、交叉軸可以幫助我們理解這些概念：
如下圖，主軸和交叉軸的排列組合有4*2 =8 種。
比如，可以像寫對聯一樣，從上到下豎著書寫，從右到左換行。
（2017新年快樂~）
.container為了方便表達，本篇文章都使用預設的軸方向。
多根軸線時，軸線之間的排列方式(align-content)。align-content的參照軸是交叉軸。其屬性也和上面的justify-content、align-items大同小異：flex-start、flex-end、center、space-between、space-around、stretch。不多做解釋。
元素寬度如何伸縮
能決定元素展示寬度的屬性有: flex-shrink，flex-grow，flex-basis，width，min-width
flex為前三個屬性的縮寫方式，所以常用寫法是flex-shrink，flex-grow，flex-basis統一用flex設定。
常見的flex設定：
序號樣式
flex-grow
flex-shrink
flex-basis
①flex預設值01
auto
②flex: 1;11
0%③flex: auto;11
auto
④flex: none;00
auto
那麼，flex-grow和flex-shrink的值會對元素造成什麼影響呢？
如下圖所示，當元素允許縮小時，最終展示的效果會是正好撐滿主軸。
在父容器中有三個元素a1,a2,a3,他們都有乙個初始寬度（比如設定了width且flex-basis不為0%）。初始寬度在下一小節會詳細講。
如果按照初始寬度放入普通父容器中，那麼他們會溢位x個畫素（見初始尺寸行）。
當父元素display: flex;，
且a1flex-shrink:1，a2flex-shrink:1，a3flex-shrink:1時，
a1、a2、a3都具有可收縮的特性。
flex-shrink的值表示需要收縮的寬度佔總溢位寬度的比例，因此展示尺寸這麼算：
將x平均分為(1+1+2) = 4份，每份寬度為i = x/4
a1的展示尺寸為：a1預設寬度 - i × 1；
a2的展示尺寸為：a1預設寬度 - i × 1；
a3的展示尺寸為：a1預設寬度 - i × 2；
同理，當元素不夠撐滿父元素時，需要伸展的寬度也是按照這種方式計算的。只是比例基數變成了剩餘空間的寬度。
**如果你希望元素不能伸縮，那麼需要設定相應的屬性為0。
如: flex-shrink: 0
flex-basis和width的關係
flex-basis 用於計算上一小節中元素的「初始寬度」。
雖然flex-basis的優先順序大於width，但是最後計算的展示尺寸受限於min-width或者max-width。
比如，元素a算出來的展示寬度為100px，但是它有個css屬性min-width: 200px;
, 那麼最後的展示寬度仍然為200px。但是計算的初始尺寸仍然是由flex-basis決定。
相容性從caniuse上可以查到，通過加上各種字首，flex可以相容到ie10以及以上。
16年年初在實際使用過程中，發現uc的支援性很不好。這次又重新試了一次，新版的uc也能很好的支援flex了。看來flex正在慢慢占領移動端。
幾個案例
通過上面幾小節的描述，可以發現flex用了一種全新的思路來布局。列出幾個常見的案例，以下案例的**統一在我的codepen可檢視。
1.垂直居中
.container2.一側固定，一側自適應
.container .content }3.多列等高
.container總結flex布局是圍繞父元素和軸來進行布局的。這種全新的思路巧妙地只需要簡單幾行**就可以實現曾經頭疼的效果，其思路的建立過程非常值得借鑑。
**：
css flex布局實用
張歆琳 關注2016.06.17 10 50 字數 701 閱讀 1063 喜歡 15 首先弄出原始的html結構，左右側邊欄定寬220px id footer footerdiv 現在將內容容器 page 設成flex彈性盒模型 page 中間main就是個普通的div，因此寬度好像沒有自適應，很...
css flex布局基礎
1 flex 讓所有彈性盒模型物件的子元素都有相同的長度，且忽略它們內部的內容 塊級元素 藍色 紅色藍色 紅色藍色 紅色藍色 紅色 main main div 效果 2 flex basis 專案的長度。合法值 auto inherit 或乙個後跟 px em 或任何其他長度單位的數字 main1 ...
CSS Flex布局整理
注意相容問題 示例的dom結構 div class box div class item 1 div div class item 2 div div class item 3 div div 基礎樣式設計 box item1 flex direction 用於指定flex主軸的方向，繼而決定 fl...