Flexbox佈局（轉）

Flexbox佈局（ Flexible Box 或CSS3 彈性佈局），是CSS3中的一種新的佈局模式，是能夠自動調整子元素的高和寬，來很好的填充任何不一樣屏幕大小的顯示設備中的可用顯示空間，收縮內容防止內容溢出，確保元素擁有恰當的行爲的佈局方式。使用Flexbox來佈局更容易，能夠使用更少的代碼，更簡單的方式實現更復雜的佈局，例如對齊方式，排列方向，排列順序（這也是Flexbox佈局的核心能力所在），彈性盒中的子元素經過在各個方向放置就能夠以彈性的尺寸適應父元素的顯示區域。因爲子元素的顯示順序和它們在代碼中 的順序是獨立的，經過使用彈性盒，定位子元素變得更加簡單，複雜的佈局也可以使用更清晰的代碼更簡單的實現。獨立顯示被設定成只針對可見元素，而不是基於代碼的聲明和導航順序。

Flexbox佈局主要由父容器和它的直接子元素組成，其中父容器被稱之爲flex container（flex容器），而其直接的子元素稱做爲flex item（flex元素）。

Flexbox佈局按照寬和高涉及的基本概念名稱有main axis(主軸)和cross axis(交叉軸，和主軸垂直)，主軸起點邊稱爲main start,主軸終點邊稱爲main end，交叉軸起點邊稱爲cross start,交叉軸終點邊稱爲cross end。如圖：

• main axis（主軸）:Flex容器的主軸主要用來排列Flex元素。它不必定是水平，這主要取決於flex-direction屬性。
• main-start（主軸起點邊） | main-end（主軸終點邊）:Flex元素的排列從容器的主軸起點邊開始，往主軸終點邊結束。
• main size:Flex元素的在主軸方向的寬度或高度就是項目的主軸長度，Flex元素的主軸長度屬性是width或height屬性，由哪個對着主軸方向決定。
• cross axis（和主軸垂直交叉的軸）:與主軸垂直的軸稱做交叉軸。
• cross-start（交叉軸起點邊） | cross-end（交叉軸終點邊）:伸縮行的排列從容器的交叉軸起點邊開始，往交叉軸終點邊結束。
• cross size:Flex元素的在交叉軸方向的寬度或高度就是項目的交叉軸長度，Flex元素的交叉軸長度屬性是width或height屬性，由哪個對着交叉軸方向決定。

flex container (flex容器 或 彈性容器)

flex容器是flex元素的的父元素。 經過設置display 屬性的值爲flex 或 inline-flex定義。

flex item(flex子元素 或 彈性子元素)

flex容器的每個子元素均爲一個flex子元素。注意：felx容器直接包含的文本變爲匿名的彈性子元素。

注意：Flexbox佈局和原來的佈局是2套概念，因此部分css屬性在flex子元素中將不起做用，好比：float, clear , vertical-align , column-*等

軸

每一個flex子元素沿着主軸（main axis）依次相互排列。交叉軸（cross axis）垂直於主軸。

• 屬性 flex-direction 定義主軸方向。
• 屬性 justify-content 定義了flex子元素如何沿着主軸排列。
• 屬性 align-items 定義了flex子元素如何沿着交叉軸排列。
• 屬性 align-self 覆蓋父元素的align-items屬性，定義了單獨的flex子元素如何沿着交叉軸排列。

方向

flex容器的主軸起點邊緣（main start）、主軸終點邊緣（main end）和 交叉軸起點邊緣（cross start）,交叉軸終點邊緣（cross end）爲flex子元素排列的起始和結束位置。它們具體取決於由writing-mode（從左到右、從右到左等等）屬性創建的向量中的主軸和交叉軸位置。

• 屬性 order 將元素依次分組，並決定誰先出現。
• 屬性 flex-flow 是屬性 flex-direction 和 flex-wrap 的簡寫，用於排列flex子元素。

行

flex子元素根據 flex-wrap 屬性控制的側軸方向（在這個方向上能夠創建垂直的新線），既能夠是一行也能夠是多行排列。

尺寸

flex子元素寬高可相應地等價於主尺寸（main size）和交叉尺寸（cross size），它們都分別取決於flex容器的主軸和側軸。

•  min-height 和 min-width 屬性的初始值爲新增關鍵字 auto。
• 屬性 flex 是 flex-basis，flex-grow 和 flex-shrink 的縮寫，表明flex子元素的伸縮性。

瀏覽器兼容性

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+ (前綴 -webkit-)
• Android 4.4+
• iOS 7.1+ (前綴 -webkit-)

有關於更詳細的兼容性，能夠閱讀下表：

移動端的瀏覽器對Flexbox 3個版本的支持狀況能夠參考這張圖片：

解決兼容性問題

1. display: -webkit-box;
2. display: -webkit-flex;
3. display: -ms-flexbox;
4. display: flex;