flex box
flex
flex parent
- flex-direction
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
- flex-wrap
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
- justify-content
含义：设置 item 作为一个整体在主轴上的对齐方式；flex-direction 的值为 row 时，在水平方向上对齐；值为 column 时，在垂直方向上对齐
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
- align-item
含义：设置 item 作为一个整体在交叉轴上的对齐方式，flex-direction 的值为 row 时，在垂直方向上对齐；值为 column 时，在水平方向上对齐
.container {
align-item: stretch | flex-start | flex-end | center | baseline;
}
- 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
- 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 宽度
- 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 的数量
- 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 缩小后的宽度即可得出
- 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
- 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 属性
