前言

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

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

如圖，Flex 由父容器 container 和子項目 item 組成，Flex container 和 item 有相應的css屬性設置。

一、Flex 容器 container

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

• 主軸起點終點：起點 main start，終點 main end

• 交叉軸起點終點：起點 cross start，終點 cross end

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

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

相應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> 復制代碼

1、flex-direction

含義：設置主軸的方向，即 item 的排列方向

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

row：默認值，主軸水平方向，起點在容器左端

row-reverse：主軸水平方向，起點在容器右端

column：主軸垂直方向，起點在容器上端

column-reverse：主軸垂直方向，起點在容器下端

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

2、flex-wrap

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

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

nowrap：默認值，不換行，item 總寬 > 容器寬，主軸寬固定，每個 item 的寬自適應

wrap：換行，第一行在上

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

注：換行時，有多少行，會將容器高均等分，每行是一個整體，而不是所有行作為一個整體

3、flex-flow

含義：flex-direction 和 flex-wrap 的簡寫

4、justify-content

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

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

flex-start：默認值，左對齊

flex-end：右對齊

center：垂直居中對齊

sapce-between：兩端對齊，item 之間間隔相等

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

5、align-item

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

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

stretch：默認值，item 未設置高或為 auto ，item 的總高和容器高一致

flex-satrt：交叉軸起點對齊

flex-end：交叉軸終點對齊

center：交叉軸居中對齊

baseline：每個item 里的第一行文字的基線（文字底部）對齊

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

6、align-content

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

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

stretch：默認值，item 未設置高或為 auto ，每行 item 高會平分交叉軸的高

flex-satrt：交叉軸起點對齊

flex-end：交叉軸終點對齊

center：交叉軸居中對齊

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

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

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

注意：

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

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

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

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

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

二、Flex 項目 item

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

1、order

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

.item {order: <integer>; } 復制代碼

2、flex-basis

含義：設置 item 的寬度，會覆蓋 width，item 總寬即每個 flex-basis 值的和，默認為 auto

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

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

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

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

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

3、flex-grow

含義：默認值為0，設置 item 放大比例

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

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

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

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

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

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

4、flex-shrink

含義：默認值為1，設置 item 縮小比例，只有不換行時才有效

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

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

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

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

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

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

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

5、flex

含義：是flex-grow，flex-shrink 和 flex-basis 的簡寫，默認值為 o 1 auto

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

快捷鍵：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

含義：為當前 item 設置在交叉軸方向的對齊方式

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

和 align-item 區(qū)別：

• align-item 是對所有 item，align-self 是對當前 item
• align-self 的 auto 值表示繼承 container 屬性

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

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

總結(jié)

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

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