摘要：年，提出了一種新的方案，是的縮寫，意為彈性布局。它的所有子元素自動成為容器成員，稱為項目，簡稱項目。屬性分為兩部分，一部分作用于容器稱容器屬性，另一部分作用于項目稱為項目屬性。表示不縮小，負值無效。后兩個是可選屬性。相關資源布局語法教程

布局的傳統解決方案是基于盒狀模型，依賴 display + position + float 方式來實現，靈活性較差。2009年，W3C提出了一種新的方案-Flex，Flex是Flexible Box的縮寫，意為”彈性布局”。Flex可以簡便、完整、響應式地實現多種頁面布局。下面我們就從基礎語法開始，一起來感受下Flex的魅力吧！

采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

Flex項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。

Flex屬性分為兩部分，一部分作用于容器稱容器屬性，另一部分作用于項目稱為項目屬性。下面我們就分部的來介紹它們。

基本語法：

.box {
  display: flex; /* 或者 inline-flex */
}

上述寫法，定義了一個flex容器，根據設值的不同可以是塊狀容器或內聯容器。這使得直接子結點擁有了一個flex上下文。

flex-direction屬性決定主軸的方向（即項目的排列方向）。

基本語法：

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}

row 表示從左向右排列

row-reverse 表示從右向左排列

column 表示從上向下排列

column-reverse 表示從下向上排列

演示程序：

演示代碼

缺省情況下，Flex項目都排在一條線（又稱"軸線"）上。我們可以通過flex-wrap屬性的設置，讓Flex項目換行排列。

基本語法：

.box {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(缺省)：所有Flex項目單行排列

wrap：所有Flex項目多行排列，按從上到下的順序

wrap-reverse：所有Flex項目多行排列，按從下到上的順序

演示程序：

演示代碼

觀察上述演示程序 ，理解不同屬性的含義。點擊演示區域，可啟動或停止演示。

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap

基本語法：

.box {
    flex-flow: <‘flex-direction’> || <‘flex-wrap’>
}

justify-content屬性定義了項目在主軸上的對齊方式及額外空間的分配方式。

基本語法：

.box  {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

flex-start(缺省)：從啟點線開始順序排列

flex-end：相對終點線順序排列

center：居中排列

space-between：項目均勻分布，第一項在啟點線，最后一項在終點線

space-around：項目均勻分布，每一個項目兩側有相同的留白空間，相鄰項目之間的距離是兩個項目之間留白的和

space-evenly：項目均勻分布，所有項目之間及項目與邊框之間距離相等

演示程序：

演示代碼

align-items屬性定義項目在交叉軸上的對齊方式。

基本語法：

.box {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

stretch(缺省)：交叉軸方向拉伸顯示

flex-start：項目按交叉軸起點線對齊

flex-end：項目按交叉軸終點線對齊

center：交叉軸方向項目中間對齊

baseline：交叉軸方向按第一行文字基線對齊

演示程序：

演示代碼

align-content屬性定義了在交叉軸方向的對齊方式及額外空間分配，類似于主軸上justify-content的作用。

基本語法：

.box {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around ;
}

stretch (缺省)：拉伸顯示

flex-start：從啟點線開始順序排列

flex-end：相對終點線順序排列

center：居中排列

space-between：項目均勻分布，第一項在啟點線，最后一項在終點線

space-around：項目均勻分布，每一個項目兩側有相同的留白空間，相鄰項目之間的距離是兩個項目之間留白的和

演示程序：

演示代碼

缺省情況下，Flex項目是按照在代碼中出現的先后順序排列的。然而order屬性可以控制項目在容器中的先后順序。

基本語法：

.item {
  order: ; /* 缺省 0 */
}

按order值從小到大順序排列，可以為負值，缺省為0。

演示程序：

演示代碼

flex-grow屬性定義項目的放大比例，flex-grow 值是一個單位的正整數，表示放大的比例。默認為0，即如果存在額外空間，也不放大，負值無效。

如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。

基本語法：

.item {
  flex-grow: ; /* 缺省 0 */
}

演示程序：

演示代碼

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。0表示不縮小，負值無效。

基本語法：

.item {
  flex-shrink: ; /* 缺省 1 */
}

演示程序：

演示代碼

flex-basis屬性定義項目在分配額外空間之前的缺省尺寸。屬性值可以是長度（20%，10rem等）或者關鍵字auto。它的默認值為auto，即項目的本來大小。

基本語法：

.item {
  flex-basis:  | auto; /* 缺省 auto */
}

演示程序：

演示代碼

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個是可選屬性。

基本語法：

.item {
  flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
}

一般推薦使用這種簡寫的方式，而不是分別定義每一個屬性。

align-self屬性定義項目的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

基本語法：

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

除了auto值以外，align-self屬性與容器的align-items屬性基本一致。

演示程序：

演示代碼

Flexbox需要一些特定的前綴以支持大多數的瀏覽器。甚至還存在完全不同的屬性名稱或屬性值。這就需要Autoprefixer或類似的CSS后處理器的輔助，具體內容請參考相關文檔。

A Complete Guide to Flexbox

Flexbox in the CSS specifications

Flexbox at MDN

Flex 布局語法教程