關於 Flex 的那點事兒

傳統的佈局方案，基於 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

參考資料

• Flex 佈局教程：語法篇
• 一勞永逸的搞定 flex 佈局