傳統的佈局方案，基於 display + position + float 屬性實現，但是，傳統的佈局方案有很多限制，在佈局要求越來越多的今天，很多佈局需要花費很大精力才能實現。
在這樣的背景下，Flex 佈局在 2009 年橫空出世，它可以輕鬆地滿足各種各樣的佈局需求，例如垂直居中等。它是一個新的盒子模型概念，彈性容器中的子元素可以在任何方向上根據已有空間進行伸縮自適應，以實現最佳的填充視覺效果，並且子元素之間不會相互重疊。
運用 Flexbox 可以很容易實現垂直居中等。其更適用於一個 UI 元件內的元素佈局呈現。
使用 Flex 很簡單，只需要指定一個盒子的 display 屬性即可以。
.container {
display: flex || inline-flex;
}
複製程式碼這個時候，這個盒子被叫做“彈性容器”（flex container），盒子裡面的子元素叫做“彈性專案”（flex items）。在這個容器中，存在兩條軸線，一條沿著預設書寫方向的主軸(main axis)，以及和它垂直的交叉軸(cross axis)， Flex 佈局就是在這樣的環境下實現的。
書寫模式是一個 W3C 新增的屬性，可以通過
direction: ltr | rtl;來設定，是文字在頁面內的排列方向，由於語言排列方向的差異，會有不同書寫方向的需求。預設情況下，其是從左到右，從上到下來書寫的，這種情況下，水平方向就是 flex 專案的主軸方向，垂直方向就是交叉軸方向。
容器內的子元素叫做 flex 專案(flex items)。下面，就是 Flex 的一些基本概念。
Flex 基本概念
Flex 的基本屬性並不多，常用的也就四五個。下面，分為容器和專案分別介紹。
容器的主要屬性
彈性容器上主要涉及到的概念有以下幾個：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
下面一次介紹在書寫方向為從左到右，從上至下情況下各個屬性值以及其值的表現形式。
flex-direction
定義佈局的主軸方向。
.container {
flex-direction: row | row-reverse | column | column-reverse
}
複製程式碼各屬性值分別表示水平（從左到右），水平（從右至左），垂直（從上到下），垂直（從下到上）。
flex-wrap
定義當彈性專案超出一行時，是否換行。
.container {
flex-wrap: wrap | nowrap | wrap-reverse;
}
複製程式碼各個屬性值分別表示換行，不換行，向反方向換行（預設向上）。
flex-flow
flex-flow 是 flex-direction 和 flex-wrap 屬性的合寫形式，其預設值為：row nowrap,同理可以設定為 column wrap 等值。
justify-content
justify-content 用來設定彈性專案在主軸方向上的對齊方式。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
複製程式碼align-items
align-items 表示彈性專案在交叉軸方向上的對齊方式。其屬性值與 jsutify-content 類似。
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
複製程式碼上面屬性中，設定為 center 的時候，很容易實現垂直居中佈局，baseline 表示根據第一行文字的基線對齊，stretch 表如果專案沒有設定高度，或者為 auto,則專案在交叉軸方向會填充滿整個容器高度。
align-content
align-content 表示多行專案的對齊方式，也就是，在交叉軸上，所有的專案是如何排列的。所以其只有在專案不止一行的時候有效。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
複製程式碼彈性專案的主要屬性
以上是 flex 容器所具有的主要屬性。下面是 flex 專案的主要屬性設定。
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
- order
flex-grow
指的是 flex 專案在空間分配上的拉伸因子，是一個預設為1的數字，flex 專案會根據設定的數值按比例分配。
flex-shrink
指的是 flex 專案在必要時的收縮因子，與上面一個屬性對應。所謂必要，指的是空間不足的時候，屬性值不能為賦值，如果屬性值為 0，則該專案不會收縮。
flex-basis
指的是 flex 專案在分配空間時的預設大小， flex 專案在這個引數的基礎上進行伸縮變化。當該屬性的值為 auto 的時候，其初始的佔空間按照其中的內容決定。內容越多，其初始值越大。也可以為其設定初始的寬高度值。
flex
flex 是前面三個屬性的簡寫形式。 預設值為 1 0 auto.
.item {
flex: flex-grow flex-shrink flex-basis;
}
複製程式碼這個屬性有兩個特殊的值，auto 和 none， auto 等價於 1 1 auto, none 等價於 0 0 auto.
看下面的例子：
article:nth-child(1) {
flex: 1 200px;
order: 1; /*flex項的排列順序，預設為0，越大越後，負數為前*/
}
article:nth-child(2) {
flex: 5 400px;
}
article:nth-child(3) {
flex: 1 200px;
order: -1;
}
複製程式碼本例中將整個空間分成了7分，第一個和第三個子項分別佔用七分之一的空間，中間一個佔七分之五。後面的 200px 和 400px 意思是 flex 專案的最小寬度。
align-self
align-self 是前面 align-items 的特殊呼應，為一個或多個特定的專案設定在交叉軸上的對齊方式，故而屬性值與 align-items 一致。
.item {
align-self: flex-start | flex-end | stretch | center | baseline;
}
複製程式碼order
通過設定 order 屬性來改變 flex 專案的預設排列順序，預設為 0，可以為負值，越大越後面，越小越前面。 order 相等時，位置由 HTML 元素出現的前後確定。
以上就是 Flex 佈局的基本知識和概念，一共涉及到 12 個屬性，但常用的就幾個，多加練習，自然很輕鬆上手。
下面是一個 flex 佈局的基本應用示例，運用了 flex 的各個引數項。
Example
參考資料