僅供參考

---

一、啟用 flex 布局

設置 class=“flex” 啟用 flex 布局

<template><div class="flex"><!-- <子元素>  --></div>
</template>

效果：父容器設置了 flex ，其所有子元素都會在同一行排列（即便是塊元素）

問題1：子元素的子元素也會在同一行顯示嗎，也就是 flex 屬性會繼承嗎

可見，父容器設置了 flex ，其孫子元素并不會在同一行中顯示，說明 flex 不可繼承，只會影響子元素的布局

問題2：子元素是因為類似浮動那樣，因為脫離了標準流才會在同一行排列嗎

設置了 flex 的容器沒有壓在其他盒子上面，說明其沒有脫離標準流，仍然占有原來的位置，只是子元素的布局發生了改變

二、行內 flex 布局

設置 class=“inline-flex” 啟用行內 flex 布局

與普通 flex 的區別：
flex：創建塊級 flex 容器（類似 display: block + flex）
inline-flex：創建行內 flex 容器（類似 display: inline-block + flex）

簡單的說，設置了 inline-flex 的元素，在開始 flex 布局的同時，自己也變成了行內塊元素

三、方向控制

一中展示的 flex 子元素都是水平排列在一行，這是因為如果不自主設置排列方向，默認為水平排列

flex-row (默認): 水平排列 (row)

flex-row-reverse: 水平反向排列

flex-col: 垂直排列 (column)

flex-col-reverse: 垂直反向排列

注意，設置方向的前提是開啟了 flex 布局，如果只設置了flex-row ，塊級元素還是不會水平排列

水平反向排列：

垂直反向排列：

四、對齊方式

如果設置了 flex-row ，如何控制子元素的對齊呢？

控制子元素的水平對齊：

justify-start：左對齊

justify-center：居中對齊

justify-end：右對齊

控制子元素的垂直對齊：

items-start：頂部對齊

items-center：居中對齊

items-end：底部對齊

如果設置了 flex-col ，如何控制子元素的對齊呢？

此時與上面完全相反，justify 控制垂直對齊，items 控制水平對齊

五、子元素控制

1、控制子元素的寬度是否可伸縮

flex-1：子元素自動填充父容器剩余的空間

可見，子元素的寬度并不是由內容撐開的，即使子元素設置了固定的寬度，其真正的寬度還是由父容器剩余的空間決定

flex-auto: 子元素基于內容自動調整寬度

（1）如果只有單個子元素設置了 flex-1 或者 flex-auto，呈現的效果是一樣的
（2）如果有多個子元素設置了 flex-1，不管其內容有多少，所有設置了 flex-1 的子元素會均分父容器剩余的空間
（3）如果有多個子元素設置了 flex-auto，不會均分父容器的剩余空間；內容較多的子元素會得到較多的空間，內容較少的子元素得到較少的空間
（4）即便設置了固定寬度，flex-auto 不會受影響

flex-none：固定寬度
這里的固定寬度并不是說像給定 width 為多少 px，而是指子元素不會填充父容器的剩余空間，子元素的大小還是可以由內容撐開

注意，flex-none 不是取消 flex 布局！！！！ 只有不設置 flex 才是取消 flex 布局

2、控制子元素順序

order-1 到 order-12 控制子項順序

order-first (等同于 order-0)

order-last (等同于 order-13)

3、控制子元素間的間隙

gap-{size}: 設置子元素之間的間隙

gap-x-{size}: 水平間隙

gap-y-{size}: 垂直間隙

顯而易見，子元素為水平排列時水平間隙才生效，垂直間隙同樣的道理

4、控制子元素是否可換行顯示

這里的換行并不是指子元素中文本的換行，而是父容器寬度不足以容納過多的子元素，子元素另起一行顯示

flex-nowrap (默認): 不換行

flex-wrap: 允許換行

flex-wrap-reverse: 反向換行