flex

flex parent

1. flex-direction

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

2. flex-wrap

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

3. 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;
}

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

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

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

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

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 child

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

.item {
  order: <integer>;
}

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

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

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

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

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

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

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

1)、每個(gè) flex-basis 值的和 > 容器寬，無論是否換行，flex-grow 無效；
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ù)量

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

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

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

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

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

image.png

如圖，每個(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è)盒子原來的寬度和，公式為 240 * x + 360 * 2x + 480 * 3x + 600 = 240 + 360 + 480，解出 x = 0.2，每個(gè) item 縮小后的寬度即可得出

5. flex
   含義：是flex-grow，flex-shrink 和 flex-basis 的簡寫，默認(rèn)值為 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
   含義：為當(dāng)前 item 設(shè)置在交叉軸方向的對(duì)齊方式

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

和 align-item 區(qū)別：

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

參考

flex全解析