【基礎知識】Flex-彈性佈局原來如此簡單！！

簡言

佈局的傳統解決方案是基於盒狀模型，依賴 display + position + float 方式來實現，靈活性較差。2009年，W3C提出了一種新的方案-Flex，Flex是Flexible Box的縮寫，意爲」彈性佈局」。Flex能夠簡便、完整、響應式地實現多種頁面佈局。下面咱們就從基礎語法開始，一塊兒來感覺下Flex的魅力吧！

1 基本概念

採用 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屬性分爲兩部分，一部分做用於容器稱容器屬性，另外一部分做用於項目稱爲項目屬性。下面咱們就分部的來介紹它們。

2 Flex容器屬性

2.1 flex容器定義

基本語法：

.box {
  display: flex; /* 或者 inline-flex */
}
複製代碼

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

2.2 flex-direction

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

基本語法：

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}
複製代碼

• row 表示從左向右排列
• row-reverse 表示從右向左排列
• column 表示從上向下排列
• column-reverse 表示從下向上排列

演示程序：

演示代碼

2.3 flex-wrap

缺省狀況下，Flex項目都排在一條線（又稱"軸線"）上。咱們能夠經過flex-wrap屬性的設置，讓Flex項目換行排列。

基本語法：

.box {
    flex-wrap: nowrap | wrap | wrap-reverse;
}
複製代碼

• nowrap(缺省)：全部Flex項目單行排列
• wrap：全部Flex項目多行排列，按從上到下的順序
• wrap-reverse：全部Flex項目多行排列，按從下到上的順序

演示程序：

演示代碼

觀察上述演示程序 ，理解不一樣屬性的含義。點擊演示區域，可啓動或中止演示。

2.4 flex-flow

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

基本語法：

.box {
    flex-flow: <‘flex-direction’> || <‘flex-wrap’>
}
複製代碼

2.5 justify-content

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：項目均勻分佈，全部項目之間及項目與邊框之間距離相等

演示程序：

演示代碼

2.6 align-items

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

基本語法：

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

• stretch(缺省)：交叉軸方向拉伸顯示
• flex-start：項目按交叉軸起點線對齊
• flex-end：項目按交叉軸終點線對齊
• center：交叉軸方向項目中間對齊
• baseline：交叉軸方向按第一行文字基線對齊

演示程序：

演示代碼

2.7 align-content

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：項目均勻分佈，每個項目兩側有相同的留白空間，相鄰項目之間的距離是兩個項目之間留白的和

演示程序：

演示代碼

3 Flex項目屬性

3.1 order

缺省狀況下，Flex項目是按照在代碼中出現的前後順序排列的。然而order屬性能夠控制項目在容器中的前後順序。

基本語法：

.item {
  order: <integer>; /* 缺省 0 */
}
複製代碼

按order值從小到大順序排列，能夠爲負值，缺省爲0。

演示程序：

演示代碼

3.2 flex-grow

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

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

基本語法：

.item {
  flex-grow: <number>; /* 缺省 0 */
}
複製代碼

演示程序：

演示代碼

3.3 flex-shrink

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

基本語法：

.item {
  flex-shrink: <number>; /* 缺省 1 */
}
複製代碼

演示程序：

演示代碼

3.4 flex-basis

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

基本語法：

.item {
  flex-basis: <length> | auto; /* 缺省 auto */
}
複製代碼

演示程序：

演示代碼

3.5 flex

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

基本語法：

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
複製代碼

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

3.6 align-self

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

基本語法：

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

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

演示程序：

演示代碼

4 兼容性

Chrome	Safari	Firefox	Opera	IE	Android	iOS
21+	6.1+	22+	12.1+	11+	4.4+	7.1+

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

5 相關資源

A Complete Guide to Flexbox

Flexbox in the CSS specifications

Flexbox at MDN

Flex 佈局語法教程