【CSS】863- 48張小圖帶你領略flex佈局之美

前言

最近在項目中，遇到佈局問題，有時候，需要堆疊很多的樣式，去排版，一定程度上增加了代碼量，那麼有沒有更加方便的佈局方式呢？👇

48張圖帶你從0到1掌握flex佈局方式。

flex佈局在某種程度上，簡便我們佈局的一個難題，接下來的篇幅將介紹它的使用👇

需要本文的Xmind導圖的話，移步公衆號--「前端UpUp」,回覆flex關鍵字即可。

flex基本概念

要想熟練掌握flex佈局的話，你需要理解兩個概念：軸和容器👇

從上面圖來看，我們將flex佈局分爲兩部分講，軸和容器。

「軸」

主軸（mian axis）
交叉軸（cross axis）

「容器」

父容器（container)
子容器（item）

打個預防針，flex佈局涉及到12個CSS屬性，父容器,子容器各6個。

接下來先梳理常見的屬性，不常見的放在進階部分來梳理。

軸

我們知道，軸包括主軸和交叉軸,那麼它們的方向是如何決定呢？我們直接從一張圖看懂它👇

默認情況下，「主軸」的方向是從左向右的，「交叉軸」垂直於主軸，逆時針方向90度，那麼接下來我們看「flex-direction」是如何決定主軸的。講這個之前，我們需要明白👇

交叉軸是由主軸決定的，主軸又是由flex-direction決定的。
flex-direction屬性設置在父容器上，這樣子纔可以生效。

flex-direction: row | row-reverse | column | column-reverse

首先佈局如下👇

<div class="wrapper">
        <div class="flex1">子盒子#flex1: 1 </div>
        <div class="flex2">子盒子#flex2: 1 </div>
</div>

接下來，我們看看他們的效果吧👇

flex-direction: row

當你給父盒子(wrapper)設置屬性
flex-direction: row

效果👇

「結論」

flex容器的主軸被定義爲與文本方向相同。主軸起點和主軸終點與內容方向相同。
簡單理解就是 「主軸沿着水平方向向右」

flex-direction: row-reverse

當你給父盒子(wrapper)設置屬性
flex-direction: row-reverse

效果👇

我們可以看到這兩個盒子的位置發生了變化，這個就是主軸起點和主軸終點位置「置換」的原因。

「結論」

表現和row相同，但是置換了主軸起點和主軸終點。
簡單理解就是 「主軸沿着水平方向向左」，與文本方向相反。

flex-direction: column

當你給父盒子(wrapper)設置屬性
flex-direction: column

效果👇

可以看到，子盒子的佈局發生了變化，形成了在Y軸上的佈局方式,並且書寫方式跟佈局一樣。

「結論」

flex容器的主軸和塊軸相同。主軸起點與主軸終點和書寫模式的前後點相同
簡單的理解，就是主軸變成Y軸方向，方向從上到下佈局。

flex-direction: column-reverse

當你給父盒子(wrapper)設置屬性
flex-direction: column-reverse

效果👇

可以看到，子盒子的佈局跟column差不多，唯一不同的是，方向上發生了變化。

「結論」

表現和 column相同，但是置換了主軸起點和主軸終點
簡單的理解，就是主軸變成Y軸方向，方向從下到上，與書寫的方向相反。

容器

這裏就分爲「父容器」和「子容器」，我們先來看看父容器👇

父容器

justify-content: 「設置子元素在主軸方向上的對齊方式」
align-items： 「設置子元素在交叉軸方向上的對齊方式」

justify-content

這個屬性設置在父容器上，「決定子元素在主軸方向上的對齊方式」，我們看看它們具體表現吧👇

justify-content: flex-start

當你給父盒子(wrapper)設置屬性
justify-content: flex-start

效果👇

「結論」，子元素沿着主軸方向開始對齊。

justify-content: flex-end

當你給父盒子(wrapper)設置屬性
justify-content: flex-end

效果👇

「結論」，子元素沿着主軸方向終點對齊。

justify-content: center

當你給父盒子(wrapper)設置屬性
justify-content: center

效果👇

「結論」，子元素在主軸方向上水平居中。

justify-content: space-between

當你給父盒子(wrapper)設置屬性
justify-content: space-between

效果👇

「結論」，子元素在主軸方向上「兩端對齊，項目之間間隔相等」。

justify-content: space-around

當你給父盒子(wrapper)設置屬性
justify-content: space-around

效果👇

「結論」，子元素在主軸方向上「均勻排列每個元素，每個元素周圍分配相同的空間」。

align-items

這個屬性設置在父容器上，「決定子元素在交叉軸方向上的對齊方式」，我們看看它們具體表現吧👇

align-items: flex-start

當你給父盒子(wrapper)設置屬性
align-items: flex-start

「結論」，子元素在交叉軸方向上起點對齊。

align-items: flex-end

當你給父盒子(wrapper)設置屬性
align-items: flex-end

「結論」，子元素在交叉軸方向上終點對齊。

align-items: center

當你給父盒子(wrapper)設置屬性
align-items: center

「結論」，子元素在交叉軸方向上居中對齊。

align-items: baseline

當你給父盒子(wrapper)設置屬性
align-items: baseline

「結論」，子元素在交叉軸方向上以文字基線對齊，具體不清楚的，可以自行百度。

align-items: stretch

當你給父盒子(wrapper)設置屬性
align-items: stretch

「結論」，這個屬性是默認的，如果項目未設置高度或者設爲 auto，將佔滿整個容器的高度。

子容器

先看張圖片

子容器的話，這裏就介紹兩個屬性👇

flex屬性定義在主軸是如何伸縮的

子容器是有彈性的，它們會自動填充剩餘空間，子容器的伸縮比由 flex屬性決定。
flex是多個屬性的縮寫，允許1-3個值的連寫，具體參考上面的圖。

align-self屬性 「單獨設置子容器如何沿交叉軸排列」

每個子容器都可以單獨定義沿交叉軸排列方式。
該屬性的取值跟父容器中的align-items屬性一致，如果兩者相同的話，則以子容器 align-self屬性爲主。

flex作用規則

三個屬性的簡寫，是flex-grow flex-shrink flex-basis的簡寫
常用簡化寫法👇

flex:1 —> flex:1 1 0%;
flex:3 —> flex:3 1 0%;
注意:flexbox佈局和原來的佈局是兩個概念，部分css屬性在flexbox盒子裏面不起作用，eg：float， clear， column,vertical-align 等等

注意👉flex-grow  flex-shrink flex-basis 這三個屬性會在後續介紹

具體的flex取值問題，可以參照下面的圖👇

「align-self作用規則」

// 起始端對齊
align-self : flex-start;

// 末尾段對齊
align-self : flex-end;

基線對齊// 末尾段對齊
align-self : baseline;

可以看到的話，它們對齊的方式是第一行文字的基線。

拉伸對齊
align-self : stretch;

flex更深入瞭解

上面介紹的常見幾個屬性掌握的話，基本上可以滿足日常的開發佈局需求，剩下的一些屬性，接下來將梳理一遍，這樣子的話，早日成爲flex佈局進階者。

父容器

「flex-wrap」 設置換行方式

絕對子容器是否可以選擇換行，一般而言有三種狀態，支持換行的話，也支持逆序換行。

「flex-flow」 設置軸向與換行組合

是 flex-direction 和 flex-wrap 的簡寫。
所以只要掌握， flex-direction 和 flex-wrap即可。

「align-content」 多行沿交叉軸對齊方式

當子容器多行排列時，設置行與行之間的對齊方式。

flex-wrap

設置子容器的換行方式，通常有三個取值👇

flex-wrap: wrap | nowrap | wrap-reverse

三種情況👇

// 允許換行
flex-wrap : wrap

效果👇

// 不允許換行
flex-wrap : nowrap

效果👇

// 允許逆向換行
flex-wrap : wrap-reverse

效果👇

flex-flow

先來一張圖👇

更多取值信息請查看 flex-direction 和 flex-wrap

可以查看MDN上，或者把之前的flex-direction 和 flex-wrap 兩者取值看過一遍，那麼使用這個屬性就沒有問題啦，這裏也就不過多的舉例子了，取值有三種情況👇

單獨設置flex-direction取值，比如

```
flex-flow: row | column
```

單獨設置flex-wrap取值

flex-flow: wrap | nowrap | wrap-reverse

同時設置兩者取值

flex-flow: row wrap
flex-flow: column nowrap

align-content

這個屬性是定義子容器在交叉軸的排列方式，也就是對齊方式。

首先上一張圖👇

根據這些取值，我們來看看佈局效果吧👇

// 起始端對齊
align-content: flex-start

效果👇

// 末尾段對齊
align-content: flex-end

效果👇

// 居中對齊
align-content: center

效果👇

// 等間距均勻分佈
align-content: space-between

效果👇

// 等邊距均勻分佈
align-content: space-around

效果👇

// 拉伸對齊
align-content: stretch

效果👇

// 基線對齊
align-content: baseline

效果👇

子容器

「flex-grow」 設置擴展比例
「flex-shrink」 設置收縮比例
「flex-basis」 設置基準大小
「order」 設置排列順序

flex-grow

子容器彈性伸展的比例，簡單理解，就是把剩餘的空間按比例分配給子容器。

我們看個例子

flex-shrink

子容器彈性收縮的比例。簡單理解，就是當你子容器超出的部分，會按照對應的比例給子容器減去對應的值。

我們來看下效果👇

當取值爲0時，就會溢出，那麼我們給它們設置一個值👇

這樣子的超出的部分就會按照比列減去。

flex-basis

有幾個點需要注意的是👇

在不伸縮的情況下，flex-basis給子容器設置大小纔有作用。
當主軸爲橫向時，即👇

```
flex-direction：row | row-reverse
```
flex-basis設置的大小爲寬度，並且會覆蓋witdh值

當主軸爲縱向時，即👇

flex-direction：column | column-reverse

flex-basis設置的大小爲高度，並且會覆蓋height值

我們來看看兩種情況👇

當主軸爲橫向時
flex-direction：row | row-reverse

效果👇

當主軸爲縱向時
flex-direction：column | column-reverse

效果👇

order

每個子容器的 order屬性默認爲0
通過設置 order屬性值，改變子容器的排列順序。
可以是負值，數值越小的話，排的越靠前。

直接看效果圖👇

總結

這個時候，是不是需要總結一下呢👇

先看看子容器屬性👇

再看看父容器屬性👇

梳理的是常見的屬性值，對於一些不常見的屬性值，請移步MDN

1. JavaScript 重溫系列（22篇全）

2. ECMAScript 重溫系列（10篇全）

3. JavaScript設計模式重溫系列（9篇全）

4. 正則 / 框架 / 算法等重溫系列（16篇全）

5. Webpack4 入門（上） || Webpack4 入門（下）

6. MobX 入門（上） || MobX 入門（下）

7. 100 +篇原創系列彙總

回覆“加羣”與大佬們一起交流學習~

點擊“閱讀原文”查看 100+ 篇原創文章

本文分享自微信公衆號 - 前端自習課（FE-study）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。