flex box

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
   含义：设置 item 作为一个整体在主轴上的对齐方式；flex-direction 的值为 row 时，在水平方向上对齐；值为 column 时，在垂直方向上对齐

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

4. align-item
   含义：设置 item 作为一个整体在交叉轴上的对齐方式，flex-direction 的值为 row 时，在垂直方向上对齐；值为 column 时，在水平方向上对齐

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

5. align-content
   含义：容器设置了换行后，所有行作为一个整体的对齐方式；多行时，该属性才有效

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

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

多行下，两个属性的 stretch 、flex-satrt、flex-end、center 实现效果类似，区别只在于换行后，justify-content 是单行作为一个整体，每行均等分高；align-content 是多行作为一个整体

align-content 优先级比 justify-content 高

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

多行下，两个属性的 sapce-between 和 sapce-around 实现效果，区别只在于 justify-content 在主轴上对齐，align-content 在交叉轴上对齐

flex child

1. order
   含义： item 在容器中的排列顺序，默认为0，无论有没有换行，数值越小，顺序越靠前

.item {
  order: <integer>;
}

2.flex-basis
含义：设置 item 的宽度，会覆盖 width，item 总宽即每个 flex-basis 值的和，默认为 auto

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

值为0或 auto 时，如果 item 没有设置宽度，则宽度为 item 内容宽度

值为百分比，item 的宽度占 container 宽度的百分比

值为固定大小，item 的宽度即为固定大小，如果总宽 > container 宽度，并且设置了换行，则 item 换行，宽度不变；未设置换行，则 item 平分 container 宽度

3. flex-grow
   含义：默认值为0，设置 item 放大比例

.item {
  flex-grow: 0 | <正整数>;
}

1)、每个 flex-basis 值的和 > 容器宽，无论是否换行，flex-grow 无效；
2)、每个 flex-basis 值的和 <= 容器宽：

当item 的宽度且 flex-basis 属性未设置，如果flex-grow 值为0或不设置，items 宽为内容宽，flex-grow 值为正整数：item 宽 = 容器宽 / (每个 item 的 flex-grow 值之和)

flex-basis 属性设置了：item 宽 = 每个 item 已设置的宽度 + (容器宽 - item 已设置的总宽) / item 的数量

4. flex-shrink
   含义：默认值为1，设置 item 缩小比例，只有不换行时才有效

.item {
  flex-shrink: 0 | <正整数>;
}

1)、每个 flex-basis 值的和 <= 容器宽，无论是否换行，flex-shrink 无效；

2)、每个 flex-basis 值的和 > 容器宽：

• flex-shrink 值没设置或相同，即每个 item 均等分容器宽
• flex-shrink 和 flex-basis 值不同，如何得到 item 的宽度？

image.png

如图，每个 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 缩小后的宽度即可得出

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 区别：

align-item 是对所有 item，align-self 是对当前 item
align-self 的 auto 值表示继承 container 属性

参考

flex全解析