原文：http://css-tricks.com/snippets/css/a-guide-to-flexbox/
彈性布局（彈性盒子，現今仍是w3c的候選推薦），目標在於，對於一個容器中的各個項目塊之間能夠有效地放置空白的區域，並且不管空白區域是不定寬的、動態的。
彈性布局背后的思想就是 使得容器中的項目塊能夠改變寬度和高度來最佳地填充可用的空間（為了適應不同類型的設備和屏幕寬度）。一個彈性的盒子能夠擴展它里面的項目塊來填充空間，或者壓縮它們防止溢出。
最重要的是，彈性布局與傳統的布局相比是方向無關的（傳統中垂直布局是塊狀布局、水平布局是內聯布局）。傳統布局能夠很好的為網頁工作，但是缺少彈性來支持大型和復雜的應用（特別當涉及到方向的變化、調整、拉伸和收縮等）。
注意:
彈性布局主要適用於應用中的組件，是小規模的布局。而柵格布局更適合用來做大型規模的布局。
基礎知識
flexbox這一個模塊而不是一個屬性，它涉及到了一系列的屬性。其中一些屬性是設置在容器上的（父元素，被稱為彈性容器），而一些屬性是設置在子元素上的（被稱為彈性項目塊/彈性內容）。
如果說常規的布局是基於塊狀元素和內聯元素的的流式方向，彈性布局就是基於“彈性的流式方向”。請看下面的圖例，解釋了彈性布局背后的主要思想。
基本上，項目塊要么布局在主軸上（上圖中從main start開始到main end結束）；要么布局在交叉軸上（上圖中從cross start開始到cross end結束）。
- main axis - 彈性容器的主軸是彈性項目塊布局的主要數軸。 注意，主軸不一定是水平的；它依賴於flex-direction這個屬性的設置
- main-start | main-end - 彈性項目塊在主軸上布局，從main-start方向開始到main-end結束
- main size - 彈性項目塊在主軸上的寬度或者高度
- cross axis - 垂直於主軸的軸線叫做交叉軸。它的方向依賴於主軸的方向
- cross-start | cross-end - 彈性項目塊在交叉軸上布局，從cross-start開始到cross-end 結束
- cross size 彈性項目塊在交叉軸上的寬度或者高度
屬性
display : flex | inline-flex ; (運用在父元素彈性容器上)
這個屬性定義出一個彈性容器；容器以內聯或者塊級方式布局取決於給定的值
請注意的是：
- CSS3的Columns屬性對彈性容器是沒有影響的（譯者注：CSS3的Columns屬性可以參見這里）
- float, clear 和 vertical-align 對彈性項目塊沒有影響
flex-direction (應用在彈性容器的父元素上)
這個屬性決定了主軸的方向，因為它確定了彈性項目塊在彈性容器中的方向
- row (默認) : 從左到右是ltr; 從右到左是 rtl
- row-reverse : 從右到左是 ltr ; 從左到右是 rtl
- column : 內容按從上到下排列
- column-reverse : 內容按從下到上排列
flex-flow(應用在彈性容器的父元素上)
是屬性'flex-direction' 和 ‘flex-wrap’ 的縮寫，能夠同時定義彈性容器的主軸和交叉軸。默認的值是 ‘row nowrap’
justify-content(應用在彈性容器的父元素上)
定義了主軸方向上的布局，它的作用是分發除了彈性內容以外的空白區域
- flex-start(默認)： 內容從開始方向排列
- flex-end: 內容從結束方向排列
- center : 內容集中在中間
- space-between : 內容散落分布在基准線上；第一個內容緊挨着開始線，最后一個內容緊挨着結束線
- space-around : 內容散落分布在基准線上；內容之間以相同的寬度隔開
align-items(應用在彈性容器的父元素上)
這個屬性定義的是彈性項目塊在交叉軸方向上的排列方式。可以認為是justify-content這個屬性在交叉軸方向上的應用（前者是在主軸上）
- flex-start : 內容排列在交叉軸的開始基線處
- flex-end : 內容排列在交叉軸的結束基線處
- center : 排列在交叉軸的中部
- baseline : 內容以它們的基線對齊
- stretch(默認): 上下鋪滿整個父容器（同樣也是會遵循min-width或者max-width的設置）
align-content(應用於彈性容器元素上)
當交叉軸方向上有多余的空白部分的時候，此屬性定義了多行之間的排列方式，類似於justify-content在主軸上對單個內容的影響
注意：當容器內的內容只有一行的時候，此屬性沒有任何影響
- flex-start : 多行內容排列在容器的開始基線處
- flex-end : 多行內容排列在容器的結束基線處
- center : 內容排列在容器的中部
- space-between : 每行內容均勻分布；第一行分布在容器的開始處，最后一行分布在容器的結束處
- stretch(默認) : 默認內容占滿整個剩余的空間
order(應用在彈性內容上)
默認情況下，彈性項目塊按原始順序布局。不過 ，order這個屬性可以控制項目塊在容器中的順序。
flex-grow(應用在彈性內容上)
定義了一個彈性項目塊的彈性增長的情況。該屬性的值是數字，用數字來作為比例。決定了彈性容器中的項目塊占領的可用空間的大小。
如果所有的彈性項目塊都設置flex-grow:1, 那么每個項目塊在容器中都會被設置成相同的大小。如果你給其中一個項目塊設置了flex-grow:2，那么這個項目塊占用的空間就會是別的項目塊的兩倍。
注意: 負值是不允許使用的。
flex-shrink (應用在彈性的內容上)
定義了彈性內容的收縮情況；同樣負值也是不允許的
flex-basis(應用在彈性內容上)
在剩余空間分配之前，定義了元素的基准 伸縮值
flex (應用在彈性內容上)
這個內容是flex-grow, flex-shrink, flex-basis這三個屬性是縮寫形式。 第二和第三個參數(flex-shrink, flex-basis)是可選的。默認值是
0 1 auto.
align-self(應用在彈性內容上)
這個屬性能夠覆蓋默認的對齊方式或者是align-items屬性定義的方式
具體的屬性value值得含義可以參考align-items的解釋
例子
從一個簡單的例子入手，解決一個最常遇到的問題：完美的居中。 用flexbox實在是再簡單不過了。
這依賴於margin值設置為auto來吸收到額外的空間。所以設置一個margin為auto 的值能夠使得內容完美的居中於兩個軸之間。
現在來使用更多的屬性。考慮有個6個項目塊，每塊都有一個固定的寬度，但是能夠自動調整。需求就是讓他們能夠均勻的分布在水平軸上，並且當我們調整瀏覽器的時候，也是能夠自適應的（不要使用媒體查詢的方法 ）.
這樣就完成了。其他的就是一些樣式上的問題了。下面是一個例子。去CodePen上，改變一下你的屏幕大小，看看會發生什么。
讓我們試試別的東西。想象一下我們有一個位於網站上部靠右對齊的導航，但是我們想讓它能夠在中等屏幕以及更小尺寸的屏幕上居中。
那么很簡單。
讓我們用flexbox來做一些更加高級的彈性功能！移動的3欄布局，並且擁有全屏寬的頭部和底部。並且獨立於原始的順序。
相關屬性
其他資源
瀏覽器支持
- (modern) 指最近的語法（display:flex;）
- (hybrid) 11年的語法 (display: flexbox;)
- (old) 09年的老語法 (display:box)
黑莓瀏覽器10+ 支持新語法
下面是一個sass，解決瀏覽器的支持問題。
