1.flex-grow，flex-shrink，flex-basis取值含義

flex-grow：

延申性描述。在滿足“延申條件”時(shí)，flex容器中的項(xiàng)目會(huì)按照設(shè)置的flex-grow值的比例來延申，占滿容器剩余空間。

取值情況：

• 取負(fù)值無效。
• 取0值表示不延申。
• 取小數(shù)情況表示不完全延申，W3C不推薦取小數(shù)。

flex-shrink：

收縮性描述。在滿足“收縮條件”時(shí)，flex容器中的項(xiàng)目會(huì)按照設(shè)置的flex-shrink和flex-basis乘積的比例來收縮，適應(yīng)容器大小。

取值情況：

• 取負(fù)值無效。
• 取0值表示不收縮。
• 取小數(shù)情況表示不完全收縮，W3C不推薦取小數(shù)。

flex-basis：

項(xiàng)目占主軸空間描述。描述項(xiàng)目占據(jù)flex容器主軸的空間為多少，參與“延申條件”和“收縮條件”的計(jì)算。

取值情況：

• 取0表示項(xiàng)目在容器中不占位置。
• 取auto表示項(xiàng)目在容器主軸的空間按優(yōu)先級(jí)由with或content決定。（在都賦值情況下的優(yōu)先級(jí)：flex-basis>witdh>盒模型content）

2.flex取值含義

2.1 flex單值語法

取關(guān)鍵字：

• initial：flex默認(rèn)值，表示只有收縮性。flex-grow: 0, flex-shrink: 1, flex-basis: auto
• auto：表示有收縮性也有延申性。flex-grow: 1, flex-shrink: 1, flex-basis: auto
• none：表示沒有收縮性也沒有延伸性。flex-grow: 0, flex-shrink: 0, flex-basis: auto

取數(shù)值：

• ： 表示設(shè)置延申性。flex-grow: <number>, flex-shrink: 1, flex-basis: 0
• 寬度值：例如px，rem，em等，表示設(shè)置項(xiàng)目占主軸空間。flex-grow: 0, flex-shrink: 1, flex-basis: 寬度值

2.2 flex雙值語法

第二個(gè)值取數(shù)值：

• ：表示設(shè)置收縮性。flex-grow: 第一個(gè)值已設(shè)置, flex-shrink: <number>, flex-basis: auto
• 寬度值：例如px，rem，em等，表示設(shè)置項(xiàng)目占主軸空間。flex-grow: 第一個(gè)值已設(shè)置, flex-shrink: 1, flex-basis: 寬度值

2.3 flex三值語法

描述flex-grow，flex-shrink，flex-basis。按照各自的規(guī)則取值即可。

3.flex延申計(jì)算與收縮計(jì)算

3.1 延申計(jì)算

當(dāng)各個(gè)項(xiàng)目的flex-grow之和大于1時(shí)：

1. 根據(jù)flex容器中各個(gè)項(xiàng)目flex-basis的值計(jì)算是否在主軸上有剩余空間，假設(shè)有那么進(jìn)行延申計(jì)算
2. 剩余空間按照各個(gè)項(xiàng)目的flex-grow的比例分配到各個(gè)項(xiàng)目上進(jìn)行延申

當(dāng)各個(gè)項(xiàng)目的flex-grow之和小于1時(shí)：

1. 根據(jù)flex容器中各個(gè)項(xiàng)目flex-basis的值計(jì)算是否在主軸上有剩余空間，假設(shè)有那么進(jìn)行延申計(jì)算
2. 要延申的空間是剩余空間乘上flex-grow之和。之后按照各個(gè)項(xiàng)目flex-grow的比例分配到各個(gè)項(xiàng)目上進(jìn)行收縮

3.2 收縮計(jì)算

當(dāng)各個(gè)項(xiàng)目的flex-shrink之和大于1時(shí)：

1. 根據(jù)flex容器中各個(gè)項(xiàng)目flex-basis的值計(jì)算是否超出了主軸空間，假設(shè)超出了那么進(jìn)行收縮計(jì)算
2. 要收縮的空間是總空間減去flex容器的主軸空間。之和按照各個(gè)項(xiàng)目flex-shrink×flex-basis的比例分配到各個(gè)項(xiàng)目上進(jìn)行收縮

當(dāng)各個(gè)項(xiàng)目的flex-shrink之和小于1時(shí)：

1. 根據(jù)flex容器中各個(gè)項(xiàng)目flex-basis的值計(jì)算是否超出了主軸空間，假設(shè)超出了那么進(jìn)行收縮計(jì)算
2. 要收縮的空間是總空間減去flex容器的主軸空間再乘上flex-shrink之和。之后按照各個(gè)項(xiàng)目flex-shrink×flex-basis的比例分配到各個(gè)項(xiàng)目上進(jìn)行收縮。

參考鏈接：

掘金博客 https://juejin.cn/post/6904462648520212488#comment

掘金博客 https://juejin.cn/post/6859547132035072007#comment

W3C官網(wǎng) https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#flex-flex-grow-factor

博客園博客 https://www.cnblogs.com/oxspirt/p/11070739.html