前言

周末整理一下Flex相關(guān)的知識(shí)，花了一天的時(shí)間，發(fā)現(xiàn)細(xì)節(jié)還是挺多的，特別是flex-shrink公式想了很久。除了第一張圖之外，其他的圖都是手畫，畫的不好請(qǐng)見(jiàn)諒。

參考阮一峰老師博客：Flex 布局教程：語(yǔ)法篇

如圖，Flex 由父容器 container 和子項(xiàng)目 item 組成，Flex container 和 item 有相應(yīng)的css屬性設(shè)置。

一、Flex 容器 container

• 兩條軸：水平主軸 main axis，垂直交叉軸 cross axis，flex-direction 屬性可改變主軸方向

• 主軸起點(diǎn)終點(diǎn)：起點(diǎn) main start，終點(diǎn) main end

• 交叉軸起點(diǎn)終點(diǎn)：起點(diǎn) cross start，終點(diǎn) cross end

實(shí)現(xiàn)Flex 布局需給父容器設(shè)置 display 屬性

.container {display: flex | inline-flex; /* 塊級(jí)元素設(shè)置flex，行內(nèi)元素設(shè)置inline-flex */ } 復(fù)制代碼

相應(yīng)HTML如下：

<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div> </div> 復(fù)制代碼

1、flex-direction

含義：設(shè)置主軸的方向，即 item 的排列方向

.container {flex-direction: row | row-reverse | column | column-reverse; } 復(fù)制代碼

row：默認(rèn)值，主軸水平方向，起點(diǎn)在容器左端

row-reverse：主軸水平方向，起點(diǎn)在容器右端

column：主軸垂直方向，起點(diǎn)在容器上端

column-reverse：主軸垂直方向，起點(diǎn)在容器下端

注釋：以下未說(shuō)明都以 flex-direction: row 為例

2、flex-wrap

含義：設(shè)置容器內(nèi) item 是否換行；flex-direction 的值為 row 時(shí)，每行 item 總寬 > 容器寬換行；值為 column 時(shí)，每行 item 總高 > 容器高換列

.container {flex-wrap: nowrap | wrap | wrap-reverse; } 復(fù)制代碼

nowrap：默認(rèn)值，不換行，item 總寬 > 容器寬，主軸寬固定，每個(gè) item 的寬自適應(yīng)

wrap：換行，第一行在上

warp-reverse：換行，第一行在下

注：換行時(shí)，有多少行，會(huì)將容器高均等分，每行是一個(gè)整體，而不是所有行作為一個(gè)整體

3、flex-flow

含義：flex-direction 和 flex-wrap 的簡(jiǎn)寫

4、justify-content

含義：設(shè)置 item 作為一個(gè)整體在主軸上的對(duì)齊方式；flex-direction 的值為 row 時(shí)，在水平方向上對(duì)齊；值為 column 時(shí)，在垂直方向上對(duì)齊

.container {justify-content: flex-start | flex-end | center | space-between | space-around; } 復(fù)制代碼

flex-start：默認(rèn)值，左對(duì)齊

flex-end：右對(duì)齊

center：垂直居中對(duì)齊

sapce-between：兩端對(duì)齊，item 之間間隔相等

sapce-around：item 兩側(cè)間隔相等，兩端 item 間隔是其他的一半

5、align-item

含義：設(shè)置 item 作為一個(gè)整體在交叉軸上的對(duì)齊方式，flex-direction 的值為 row 時(shí)，在垂直方向上對(duì)齊；值為 column 時(shí)，在水平方向上對(duì)齊

.container {align-item: stretch | flex-start | flex-end | center | baseline; } 復(fù)制代碼

stretch：默認(rèn)值，item 未設(shè)置高或?yàn)?auto ，item 的總高和容器高一致

flex-satrt：交叉軸起點(diǎn)對(duì)齊

flex-end：交叉軸終點(diǎn)對(duì)齊

center：交叉軸居中對(duì)齊

baseline：每個(gè)item 里的第一行文字的基線（文字底部）對(duì)齊

Tip：設(shè)置水平垂直居中 .container { display: flex; justify-content: center; align-item: center; }

6、align-content

含義：容器設(shè)置了換行后，所有行作為一個(gè)整體的對(duì)齊方式；多行時(shí)，該屬性才有效

.container {align-content: stretch | flex-start | flex-end | center | space-between | space-around; } 復(fù)制代碼

stretch：默認(rèn)值，item 未設(shè)置高或?yàn)?auto ，每行 item 高會(huì)平分交叉軸的高

flex-satrt：交叉軸起點(diǎn)對(duì)齊

flex-end：交叉軸終點(diǎn)對(duì)齊

center：交叉軸居中對(duì)齊

sapce-between：兩端對(duì)齊，每行item 之間間隔相等

sapce-around：item 兩側(cè)間隔相等，兩端每行 item 間隔是其他行的一半

Tip：設(shè)置水平垂直居中 .container { display: flex; justify-content: center; align-content: center; }

注意：

1)、align-content 和 align-item 比較。

• 多行下，兩個(gè)屬性的 stretch 、flex-satrt、flex-end、center 實(shí)現(xiàn)效果類似，區(qū)別只在于換行后，justify-content 是單行作為一個(gè)整體，每行均等分高；align-content 是多行作為一個(gè)整體

• align-content 優(yōu)先級(jí)比 justify-content 高

2)、align-content 和 justify-content 比較。

• 多行下，兩個(gè)屬性的 sapce-between 和 sapce-around 實(shí)現(xiàn)效果，區(qū)別只在于 justify-content 在主軸上對(duì)齊，align-content 在交叉軸上對(duì)齊

二、Flex 項(xiàng)目 item

• 水平、垂直尺寸：主軸尺寸 main size，交叉軸尺寸 cross size

1、order

含義： item 在容器中的排列順序，默認(rèn)為0，無(wú)論有沒(méi)有換行，數(shù)值越小，順序越靠前

.item {order: <integer>; } 復(fù)制代碼

2、flex-basis

含義：設(shè)置 item 的寬度，會(huì)覆蓋 width，item 總寬即每個(gè) flex-basis 值的和，默認(rèn)為 auto

.item {flex-basis: <auto> | <percent> | <size>; } 復(fù)制代碼

• 值為0或 auto 時(shí)，如果 item 沒(méi)有設(shè)置寬度，則寬度為 item 內(nèi)容寬度

• 值為百分比，item 的寬度占 container 寬度的百分比

• 值為固定大小，item 的寬度即為固定大小，如果總寬 > container 寬度，并且設(shè)置了換行，則 item 換行，寬度不變；未設(shè)置換行，則 item 平分 container 寬度

Tip：建議用 flex-basis 設(shè)置 item 的寬度，而不是 width

3、flex-grow

含義：默認(rèn)值為0，設(shè)置 item 放大比例

1)、每個(gè) flex-basis 值的和 > 容器寬，無(wú)論是否換行，flex-grow 無(wú)效；

2)、每個(gè) flex-basis 值的和 <= 容器寬：

• 當(dāng)item 的寬度且 flex-basis 屬性未設(shè)置，如果flex-grow 值為0或不設(shè)置，items 寬為內(nèi)容寬，flex-grow 值為正整數(shù)：item 寬 = 容器寬 / (每個(gè) item 的 flex-grow 值之和)

• flex-basis 屬性設(shè)置了：item 寬 = 每個(gè) item 已設(shè)置的寬度 + (容器寬 - item 已設(shè)置的總寬) / item 的數(shù)量

Tip：flex-grow 最好可以和 flex-basis 一起用，哪怕 flex-basis 值為0

.item {flex-grow: 0 | <正整數(shù)>; } 復(fù)制代碼

4、flex-shrink

含義：默認(rèn)值為1，設(shè)置 item 縮小比例，只有不換行時(shí)才有效

.item {flex-shrink: 0 | <正整數(shù)>; } 復(fù)制代碼

1)、每個(gè) flex-basis 值的和 <= 容器寬，無(wú)論是否換行，flex-shrink 無(wú)效；

2)、每個(gè) flex-basis 值的和 > 容器寬：

• flex-shrink 值沒(méi)設(shè)置或相同，即每個(gè) item 均等分容器寬
• flex-shrink 和 flex-basis 值不同，如何得到 item 的寬度？

如圖，每個(gè) item 的 flex-shrink 和 flex-basis 值都設(shè)置了，容器寬為600px：

設(shè)置縮小比例為 x，1倍是 x，2倍是 2x，3倍是 3x，第一個(gè)盒子應(yīng)該縮小 240px * x，第二個(gè)盒子應(yīng)縮小 360px * 2x，第3個(gè)盒子應(yīng)縮小 480px * 3x，三個(gè)盒子縮小的寬度加上容器寬度，等于三個(gè)盒子原來(lái)的寬度和，公式為 240 * x + 360 * 2x + 480 * 3x + 600 = 240 + 360 + 480，解出 x = 0.2，每個(gè) item 縮小后的寬度即可得出

Tip：最好不要設(shè)置 flex-shrink 值為0，則 item 不縮小，可能會(huì)導(dǎo)致 item 撐出容器；并且同一條件下，flex-shrink 和 flex-grow 只有一個(gè)有效

5、flex

含義：是flex-grow，flex-shrink 和 flex-basis 的簡(jiǎn)寫，默認(rèn)值為 o 1 auto

.item{flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 復(fù)制代碼

快捷鍵：auto（1, 1, auto）；none（0 0 auto）

有以下情況：

1)、flex: 1 <=> flex: 1 1 0%

2)、flex: 0 <=> flex: 0 1 0%

3)、flex: 0% <=> flex: 1 1 0%

4)、flex: 10px <=> flex: 1 1 10px

4)、flex: 2 2 <=> flex: 2 2 0%

5)、flex: 2 10px <=> flex: 2 1 10px

6、align-self

含義：為當(dāng)前 item 設(shè)置在交叉軸方向的對(duì)齊方式

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch; } 復(fù)制代碼

和 align-item 區(qū)別：

• align-item 是對(duì)所有 item，align-self 是對(duì)當(dāng)前 item
• align-self 的 auto 值表示繼承 container 屬性

本文首發(fā)：Flex全解析

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的Flex 全解析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。