Flex 基本概念：

image.png

在 flex 容器中默認(rèn)存在兩條軸港令，水平主軸(main axis) 和垂直的交叉軸(cross axis)金闽，這是默認(rèn)的設(shè)置涵妥，當(dāng)然你可以通過(guò)修改使垂直方向變?yōu)橹鬏S，水平方向變?yōu)榻徊孑S

在容器中的每個(gè)單元塊被稱之為 flex item助币，每個(gè)項(xiàng)目占據(jù)的主軸空間為 (main size), 占據(jù)的交叉軸的空間為 (cross size)。

這里需要強(qiáng)調(diào)螟碎，不能先入為主認(rèn)為寬度就是 main size眉菱，高度就是 cross size，這個(gè)還要取決于你主軸的方向掉分，如果你垂直方向是主軸俭缓，那么項(xiàng)目的高度就是 main size。

Flex 容器：

首先酥郭，實(shí)現(xiàn) flex 布局需要先指定一個(gè)容器华坦，任何一個(gè)容器都可以被指定為 flex 布局，這樣容器內(nèi)部的元素就可以使用 flex 來(lái)進(jìn)行布局不从。

.container {
    display: flex | inline-flex;       //可以有兩種取值
}

分別生成一個(gè)塊狀或行內(nèi)的 flex 容器盒子惜姐。簡(jiǎn)單說(shuō)來(lái)，如果你使用塊元素如 div椿息，你就可以使用 flex载弄，而如果你使用行內(nèi)元素耘拇，你可以使用 inline-flex。

需要注意的是：當(dāng)時(shí)設(shè)置 flex 布局之后宇攻，子元素的 float惫叛、clear、vertical-align 的屬性將會(huì)失效逞刷。

有下面六種屬性可以設(shè)置在容器上嘉涌，它們分別是：

1、flex-direction
2夸浅、flex-wrap
3仑最、flex-flow
4、justify-content
5帆喇、align-items
6警医、align-content

1. flex-direction: 決定主軸的方向(即項(xiàng)目的排列方向)

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

默認(rèn)值：row，主軸為水平方向坯钦，起點(diǎn)在左端预皇。

image.png

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

image.png

column：主軸為垂直方向婉刀，起點(diǎn)在上沿

image.png

image.png

2. flex-wrap: 決定容器內(nèi)項(xiàng)目是否可換行

默認(rèn)情況下，項(xiàng)目都排在主軸線上突颊，使用 flex-wrap 可實(shí)現(xiàn)項(xiàng)目的換行鲁豪。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

默認(rèn)值：nowrap 不換行，即當(dāng)主軸尺寸固定時(shí)律秃，當(dāng)空間不足時(shí)爬橡，項(xiàng)目尺寸會(huì)隨之調(diào)整而并不會(huì)擠到下一行。

image.png

wrap：項(xiàng)目主軸總尺寸超出容器時(shí)換行棒动，第一行在上方

image.png

wrap-reverse：換行堤尾，第一行在下方

image.png

3. flex-flow: flex-direction 和 flex-wrap 的簡(jiǎn)寫(xiě)形式

.container {
    flex-flow: <flex-direction> || <flex-wrap>;
}

默認(rèn)值為: row nowrap，感覺(jué)沒(méi)什么卵用迁客，老老實(shí)實(shí)分開(kāi)寫(xiě)就好了。這樣就不用記住這個(gè)屬性了辞槐。

4. justify-content：定義了項(xiàng)目在主軸的對(duì)齊方式掷漱。

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

建立在主軸為水平方向時(shí)測(cè)試，即 flex-direction: row

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

image.png

flex-end：右對(duì)齊

image.png

image.png

space-between：兩端對(duì)齊榄檬，項(xiàng)目之間的間隔相等卜范，即剩余空間等分成間隙。

image.png

image.png

5. align-items: 定義了項(xiàng)目在交叉軸上的對(duì)齊方式

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

建立在主軸為水平方向時(shí)測(cè)試锦爵，即 flex-direction: row

默認(rèn)值為 stretch 即如果項(xiàng)目未設(shè)置高度或者設(shè)為 auto，將占滿整個(gè)容器的高度奥裸。

image.png

假設(shè)容器高度設(shè)置為 100px险掀，而項(xiàng)目都沒(méi)有設(shè)置高度的情況下，則項(xiàng)目的高度也為 100px湾宙。

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

image.png

假設(shè)容器高度設(shè)置為 100px樟氢，而項(xiàng)目分別為 20px, 40px, 60px, 80px, 100px, 則如上圖顯示。

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

image.png

center：交叉軸的中點(diǎn)對(duì)齊

image.png

baseline: 項(xiàng)目的第一行文字的基線對(duì)齊

image.png

以文字的底部為主侠鳄，仔細(xì)看圖可以理解埠啃。

6. align-content: 定義了多根軸線的對(duì)齊方式，如果項(xiàng)目只有一根軸線伟恶，那么該屬性將不起作用

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

這個(gè)這樣理解：

當(dāng)你 flex-wrap 設(shè)置為 nowrap 的時(shí)候碴开，容器僅存在一根軸線，因?yàn)轫?xiàng)目不會(huì)換行博秫，就不會(huì)產(chǎn)生多條軸線潦牛。

當(dāng)你 flex-wrap 設(shè)置為 wrap 的時(shí)候，容器可能會(huì)出現(xiàn)多條軸線台盯，這時(shí)候你就需要去設(shè)置多條軸線之間的對(duì)齊方式了罢绽。

建立在主軸為水平方向時(shí)測(cè)試，即 flex-direction: row, flex-wrap: wrap

默認(rèn)值為 stretch静盅，看下面的圖就很好理解了

image.png

從圖可以看出又三條軸線(因?yàn)槿萜鲗挾扔邢?良价，當(dāng)值為 stretch 時(shí)會(huì)三條軸線平分容器的垂直方向上的空間。

值得注意的是蒿叠，雖然在每條軸線上項(xiàng)目的默認(rèn)值也為 stretch明垢，但是由于我每個(gè)項(xiàng)目我都設(shè)置了高度，所以它并沒(méi)有撐開(kāi)整個(gè)容器市咽。如果項(xiàng)目不設(shè)置高度的話就會(huì)變成下面這樣：

image.png

這個(gè)我在前面也有提到(align-items)痊银，這里重點(diǎn)還是理解三條軸線會(huì)平分垂直軸上的空間。

flex-start：軸線全部在交叉軸上的起點(diǎn)對(duì)齊

image.png

flex-end：軸線全部在交叉軸上的終點(diǎn)對(duì)齊

image.png

image.png

space-between：軸線兩端對(duì)齊施绎，之間的間隔相等溯革，即剩余空間等分成間隙。

image.png

image.png

到這里關(guān)于容器上的所有屬性都講完了，接下來(lái)就來(lái)講講關(guān)于在 flex item 上的屬性俱尼。

Flex 項(xiàng)目屬性：
有六種屬性可運(yùn)用在 item 項(xiàng)目上：
1抖单、order
2、flex-basis
3、flex-grow
4矛绘、flex-shrink
5耍休、flex
6、align-self

1. order: 定義項(xiàng)目在容器中的排列順序货矮，數(shù)值越小羊精，排列越靠前，默認(rèn)值為 0

.item {
    order: <integer>;
}

image.png

在 HTML 結(jié)構(gòu)中次屠，雖然 -2园匹，-1 的 item 排在后面，但是由于分別設(shè)置了 order劫灶，使之能夠排到最前面裸违。

2. flex-basis: 定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間本昏，瀏覽器根據(jù)這個(gè)屬性供汛，計(jì)算主軸是否有多余空間

.item {
    flex-basis: <length> | auto;
}

默認(rèn)值：auto，即項(xiàng)目本來(lái)的大小, 這時(shí)候 item 的寬高取決于 width 或 height 的值涌穆。

當(dāng)主軸為水平方向的時(shí)候怔昨，當(dāng)設(shè)置了 flex-basis，項(xiàng)目的寬度設(shè)置值會(huì)失效宿稀，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能發(fā)揮效果趁舀。

當(dāng) flex-basis 值為 0 % 時(shí)，是把該項(xiàng)目視為零尺寸的祝沸，故即使聲明該尺寸為 140px矮烹，也并沒(méi)有什么用。
當(dāng) flex-basis 值為 auto 時(shí)罩锐，則跟根據(jù)尺寸的設(shè)定值(假如為 100px)奉狈，則這 100px 不會(huì)納入剩余空間。

3. flex-grow: 定義項(xiàng)目的放大比例

.item {
    flex-grow: <number>;
}

默認(rèn)值為 0涩惑，即如果存在剩余空間仁期，也不放大

image.png

當(dāng)所有的項(xiàng)目都以 flex-basis 的值進(jìn)行排列后，仍有剩余空間竭恬，那么這時(shí)候 flex-grow 就會(huì)發(fā)揮作用了跛蛋。
如果所有項(xiàng)目的 flex-grow 屬性都為 1，則它們將等分剩余空間痊硕。(如果有的話)

如果一個(gè)項(xiàng)目的 flex-grow 屬性為 2赊级，其他項(xiàng)目都為 1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍寿桨。

當(dāng)然如果當(dāng)所有項(xiàng)目以 flex-basis 的值排列完后發(fā)現(xiàn)空間不夠了，且 flex-wrap：nowrap 時(shí)，此時(shí) flex-grow 則不起作用了亭螟，這時(shí)候就需要接下來(lái)的這個(gè)屬性挡鞍。

4. flex-shrink: 定義了項(xiàng)目的縮小比例

.item {
    flex-shrink: <number>;
}

默認(rèn)值: 1，即如果空間不足预烙，該項(xiàng)目將縮小墨微，負(fù)值對(duì)該屬性無(wú)效。

image.png

這里可以看出扁掸，雖然每個(gè)項(xiàng)目都設(shè)置了寬度為 50px翘县，但是由于自身容器寬度只有 200px，這時(shí)候每個(gè)項(xiàng)目會(huì)被同比例進(jìn)行縮小谴分，因?yàn)槟J(rèn)值為 1锈麸。
同理可得：

如果所有項(xiàng)目的 flex-shrink 屬性都為 1，當(dāng)空間不足時(shí)牺蹄，都將等比例縮小忘伞。

如果一個(gè)項(xiàng)目的 flex-shrink 屬性為 0，其他項(xiàng)目都為 1沙兰，則空間不足時(shí)氓奈，前者不縮小。

5. flex: flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)

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

flex 的默認(rèn)值是以上三個(gè)屬性值的組合鼎天。假設(shè)以上三個(gè)屬性同樣取默認(rèn)值舀奶，則 flex 的默認(rèn)值是 0 1 auto。

有關(guān)快捷值：auto (1 1 auto) 和 none (0 0 auto)

關(guān)于 flex 取值斋射，還有許多特殊的情況育勺，可以按以下來(lái)進(jìn)行劃分：

當(dāng) flex 取值為一個(gè)非負(fù)數(shù)字，則該數(shù)字為 flex-grow 值绩鸣，flex-shrink 取 1怀大，flex-basis 取 0%，如下是等同的：

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

當(dāng) flex 取值為 0 時(shí)呀闻，對(duì)應(yīng)的三個(gè)值分別為 0 1 0%

.item {flex: 0;}
.item {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0%;
}

當(dāng) flex 取值為一個(gè)長(zhǎng)度或百分比化借，則視為 flex-basis 值，flex-grow 取 1捡多，flex-shrink 取 1蓖康，有如下等同情況（注意 0% 是一個(gè)百分比而不是一個(gè)非負(fù)數(shù)字）

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.item-2 {flex: 24px;}
.item-2 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

當(dāng) flex 取值為兩個(gè)非負(fù)數(shù)字，則分別視為 flex-grow 和 flex-shrink 的值垒手，flex-basis 取 0%蒜焊，如下是等同的：

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

當(dāng) flex 取值為一個(gè)非負(fù)數(shù)字和一個(gè)長(zhǎng)度或百分比，則分別視為 flex-grow 和 flex-basis 的值科贬，flex-shrink 取 1泳梆，如下是等同的：

.item {flex: 11 32px;}
.item {
    flex-grow: 11;
    flex-shrink: 1;
    flex-basis: 32px;
}

建議優(yōu)先使用這個(gè)屬性鳖悠，而不是單獨(dú)寫(xiě)三個(gè)分離的屬性。

grow 和 shrink 是一對(duì)雙胞胎优妙，grow 表示伸張因子乘综，shrink 表示是收縮因子。

grow 在 flex 容器下的子元素的寬度和比容器和小的時(shí)候起作用套硼。 grow 定義了子元素的尺寸增長(zhǎng)因子卡辰，容器中除去子元素之和剩下的尺寸會(huì)按照各個(gè)子元素的 grow 值進(jìn)行平分加大各個(gè)子元素上。

補(bǔ)充：
1邪意、當(dāng) flex-wrap 為 wrap | wrap-reverse九妈，且子項(xiàng)寬度和不及父容器寬度時(shí)，flex-grow 會(huì)起作用雾鬼，子項(xiàng)會(huì)根據(jù) flex-grow 設(shè)定的值放大（為0的項(xiàng)不放大）
2萌朱、當(dāng) flex-wrap 為 wrap | wrap-reverse，且子項(xiàng)寬度和超過(guò)父容器寬度時(shí)呆贿，首先一定會(huì)換行嚷兔，換行后，每一行的右端都可能會(huì)有剩余空間（最后一行包含的子項(xiàng)可能比前幾行少做入，所以剩余空間可能會(huì)更大）冒晰，這時(shí) flex-grow 會(huì)起作用，若當(dāng)前行所有子項(xiàng)的 flex-grow 都為0竟块，則剩余空間保留壶运，若當(dāng)前行存在一個(gè)子項(xiàng)的 flex-grow 不為0，則剩余空間會(huì)被 flex-grow 不為0的子項(xiàng)占據(jù)
3浪秘、當(dāng) flex-wrap 為 nowrap蒋情，且子項(xiàng)寬度和不及父容器寬度時(shí)，flex-grow 會(huì)起作用耸携，子項(xiàng)會(huì)根據(jù) flex-grow 設(shè)定的值放大（為0的項(xiàng)不放大）
4棵癣、當(dāng) flex-wrap 為 nowrap，且子項(xiàng)寬度和超過(guò)父容器寬度時(shí)夺衍，flex-shrink 會(huì)起作用狈谊，子項(xiàng)會(huì)根據(jù) flex-shrink 設(shè)定的值進(jìn)行縮小（為0的項(xiàng)不縮泄瞪场）河劝。但這里有一個(gè)較為特殊情況，就是當(dāng)這一行所有子項(xiàng) flex-shrink 都為0時(shí)矛紫，也就是說(shuō)所有的子項(xiàng)都不能縮小赎瞎，就會(huì)出現(xiàn)討厭的橫向滾動(dòng)條
5、總結(jié)上面四點(diǎn)颊咬，可以看出不管在什么情況下务甥，在同一時(shí)間牡辽，flex-shrink 和 flex-grow 只有一個(gè)能起作用，這其中的道理細(xì)想起來(lái)也很淺顯：空間足夠時(shí)敞临，flex-grow 就有發(fā)揮的余地催享，而空間不足時(shí)，flex-shrink 就能起作用哟绊。當(dāng)然，flex-wrap 的值為 wrap | wrap-reverse 時(shí)痰憎，表明可以換行票髓，既然可以換行，一般情況下空間就總是足夠的铣耘，flex-shrink 當(dāng)然就不會(huì)起作用

6. align-self: 允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式
   單個(gè)項(xiàng)目覆蓋 align-items 定義的屬性

默認(rèn)值為 auto洽沟，表示繼承父元素的 align-items 屬性，如果沒(méi)有父元素蜗细，則等同于 stretch裆操。

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

這個(gè)跟 align-items 屬性時(shí)一樣的，只不過(guò) align-self 是對(duì)單個(gè)項(xiàng)目生效的炉媒，而 align-items 則是對(duì)容器下的所有項(xiàng)目生效的踪区。

image.png

注：由于本文原作者寫(xiě)的相當(dāng)精彩，這里就直接拿過(guò)來(lái)作為個(gè)人復(fù)習(xí)知識(shí)點(diǎn)用了吊骤，如果有侵權(quán)缎岗，請(qǐng)聯(lián)系立馬刪除，原文地址：https://zhuanlan.zhihu.com/p/25303493