CSS佈局神器——伸縮盒（語法篇）

這是HTML&CSS重點知識點合集第三篇。其他文章見文末。

1、伸縮盒（Flexible Box）

伸縮盒（Flexible Box），看名字就知道，一個 「有彈性」 的盒子啦~（笑）

好啦，正緊一點。首先，伸縮盒是啥？伸縮盒是對傳統佈局方案的補充。傳統的佈局解決方案是基於盒狀模型，依賴 display 屬性 + position 屬性 + float 屬性。可是它對於一些特殊複雜的佈局實現起來就比較吃力，或者就沒辦法實現。好比：

• 在父內容裏面垂直居中一個塊內容。
• 使容器的全部子項佔用等量的可用寬度/高度，而無論有多少寬度/高度可用。
• 使多列布局中的全部列採用相同的高度，即便它們包含的內容量不一樣。

可能你已經猜到了，彈性佈局就可以使不少佈局任務變得方便且靈活。下面就讓咱們來看看彈性佈局是如何來實現的吧！

2、語法概念

系統的熟悉一下Flexbox的語法是有必要的。固然，相信有不少人在項目中都已經用過Flexbox了，那就再複習一下吧，或許會有驚喜發現哦！

Flexbox是由 **伸縮容器（flex container）**和 **伸縮項目（flex item）**組成。經過將元素的 display 屬性設置爲 flex 或者 inline-flex 就能夠獲得一個伸縮容器。display 被設置爲 flex 時，伸縮容器就會被渲染成一個塊級元素，而被設置爲 inline-flex 時，容器會被渲染成一個行內元素。

咱們能夠舉個例子：

.container {
  display: flex;
  display: -webkit-flex;
}

/* 假設絕大多用戶使用的瀏覽器版本較高，因此這裏使用優雅降級的書寫方式 */
複製代碼

(1).伸縮容器

伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目的數量能夠是任意的，且和BFC同樣，容器內的元素和容器外的元素互不影響。

伸縮容器內部有兩個軸方向，分別是主軸（main axis）和側軸（cross axis）。主軸決定了伸縮項目的排列方向，默認是水平方向。咱們能夠經過容器屬性 flex-direction 進行設置。側軸和主軸是相對應的。咱們來看看MDN上的一張經典圖片：

簡單的來講，伸縮容器基於兩個軸的方向定義了它內部的flex item如何佈局。

①. 容器屬性

伸縮容器有六個能夠設置的屬性，分別是：

1. flex-direction：定義了伸縮容器中flex item的排列方向
2. flex-wrap：定義了主軸方向排列的item是否換行
3. flex-flow：前兩個屬性的簡寫。
4. justify-content：主軸方向的對齊方式
5. align-items：側軸方向的對齊方式
6. align-content：多根軸線的對齊方式

對於第1、二屬性，當某一個須要設置爲非默認值時，咱們經常將它們一塊兒設置，好比 flex-flow: row nowrap。屬性4、五經常用來設置容器在主軸和側軸的對齊方式。例如，當但願容器中的item兩側間距相同時（在主軸方向上），咱們能夠設置屬性 display: flex; justify-content: space-around;。align-items 經常用來設置item在側軸方向居中，例如 align-items: center;。咱們常見的問題：如何讓一個元素在容器中實現居中？一個簡單的方法就是：

.container {
  display: flex;
  justify-container: center;
  align-items: center;
}
複製代碼

②. 主要的兩個屬性

關於伸縮容器，主要須要瞭解的就是 justify-content 以及 align-items 這兩個屬性幾個值的排布特徵。

justify-content：

/* justify-content*/
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ...+ safe | unsafe;
}
複製代碼

須要說明的是，在不一樣的瀏覽器中，所支持的值並非徹底同樣的。好比，space-between 在 Edge的一些版本中就不被支持，再好比Chrome不支持 start、end、right、left。最安全的三個值是 flex-start、flex-end、center。

align-items：

說完了 justify-content，如今咱們來講說 align-items。

.container {
  /* align-items */
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ...safe | unsafe;
}
複製代碼

相信你們對前五個屬性仍是比較熟悉的，那咱們就來說講這個 baseline。它其實也很簡單，就是根據文本的基線對齊：

③. 你可能不知道的兩個屬性值—— safe 和 unsafe

你可能會對 safe 和 unsafe 這兩個值感到陌生。Box Alignment規範新增了Safe和Unsafe對齊的概念，對應這兩個關鍵字。

咱們以 align-items 的值來探討一下。在下面的代碼中，最後一項對於Flexbox來講太長了，上下都發生了溢出，且這種對齊方式是不安全的。

.container {  
  display: flex;
  flex-direction: column;
  width: 100px;
  align-items: unsafe center;
}

.item:last-child {
  width: 200px;
}
複製代碼

不安全的對齊方式致使的對齊結果可能會發生數據丟失

而安全對齊方式會避免數據丟失的出現，將溢出轉移到一邊（可控的一邊）。

.container {
  display: flex;
  flex-direction: column;
  width: 100px;
  align-items: safe center;
}

.item:last-child {
  width: 200px;
}
複製代碼

注：Chrome目前（Version 80.0.3987.116）暫不支持這兩個值。

(2).伸縮項目

①. 項目屬性

如今咱們來說講flex item的屬性。項目屬性用來定義每一個伸縮容器中項目的動做。總共有六個：

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

order：定義了每一個item在主軸上的排列順序。值越小的item排在越前面，默認值爲 0，能夠設置負值。

.item {
  order: <interger>; /* 默認爲0 */
}
複製代碼

flex-grow：定義項目的放大比例。默認值爲 0，即若是有剩餘空間元素也不進行放大。若值被設置爲 1，說明當有剩餘位置時，剩餘位置將被全部item平分。該屬性不能設置爲負值。

.item {
  flex-grow: <number>; /* 默認爲0 */
}
複製代碼

flex-shrink：定義了項目的縮小比例。默認值爲1，即若是空間不足，該項目將縮小。該屬性不能設置爲負值。

.item {
  flex-shrink: <number>; /* 默認爲1 */
}
複製代碼

flex-basis：定義了在分配多餘空間以前，項目佔據的主軸空間(main-size)。瀏覽器會根據這個屬性計算主軸是否有多餘空間。默認值爲 auto。

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

值得注意的是，當 width 被設置且 flex-basis 的值比 width 大時，width 的值將會被覆蓋。若 width 沒有被設置，且當長度大於內容長度設置的 flex-basis 纔會生效。例如，當 flex-basis 被設置爲 0 時，且 width 沒有被設置，則item的長度爲所佔內容的長度。（雖然 width 沒有被設置，但 flex-item 的值爲 0，小於內容的長度，則 flex-basis 不生效）。能夠點擊連接進行實操。

flex，是屬性 flex-grow，flex-shrink，flex-basis 的簡寫。後兩個屬性可選。

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

flex 有兩個快捷值：auto、none。前者是 1 1 auto 的簡寫，後者是0 0 auto的簡寫。咱們建議優先使用 flex ，而不是單獨使用某一個屬性，由於簡寫形式能夠自動地設置其它值。

align-self：它容許單個項目與其它項目設置不同地對齊方式，而且它能夠覆蓋父元素的 align-items，默認值爲 auto，表示繼承。若沒有父元素，則等同於 stretch。

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

最後，float、clear 以及 vertical-align 等佈局屬性在伸縮項目中是不起做用的。

---

這是HTML&CSS重點知識點合集的其中一篇，合集其它文章：
1.語義化HTML的重要性
2.傳說中的BFC
4.網格佈局 ——（語法篇）

推薦閱讀：
1.A Complete Guide to Flexbox-2020-02-3
2.譯·Flexbox都在這裏-2019-07-23