2021-04-05

父容器的属性**

flex-direction: row | row-reverse | column | column-reverse 定义子元素在主轴的排列方向

row从左到右(默认值)

row-reverse 从右到左

column从上到下

column-reverse从下到上

flex-wrap : wrap | nowrap | wrap-reverse 子元素的换行

wrap如果子元素宽度超出则往下换行

nowrap不换行(默认值),此时如果子元素设置了宽度则不会生效

wrap-reverse 如果子元素宽度超出则往上换行

flex-flow: flex-direction flex-wrap

以上两个属性的组合写法

justify-content: flex-start | flex-end | center | space-between | space-around 伸缩项在主轴的对齐方式

flex-start 主轴的起点对齐

flex-end 主轴的终点对齐

center 主轴居中对齐

space-between 两端对齐中间的空间平分

space-around 伸缩项之间的空间平均分配

align-content: flex-start | flex-end | center | space-between | space-around | stretch 多行伸缩项在交叉轴的对齐方式, 经过测试,flex-direction为column的无效,要row且换行的才有效

flex-start 交叉轴的起点对齐

flex-end 交叉轴的终点对齐

center 交叉轴居中对齐

space-between 上下两端对齐中间的空间平分

space-around 伸缩项之间的空间平均分配

stretch 拉伸对齐,每行都拉伸填满后对齐

align-items: flex-start | flex-end | center | baseline | stretch

flex-start 交叉轴的起点对齐

flex-end 交叉轴的终点对齐

center 交叉轴居中对齐

baseline 基于内容的基线对齐

stretch 拉伸对齐 (默认)

align-items 与 *align-content的区别*

1、align-items对单行多行的都有效，align-content只对flex-direction为水平flex-wrap为换行的多行伸缩项有效；

2、当值为flex-start、flex-end、center时align-items项目之间平分剩余空间，align-content项目之间没有空间；

伸缩项的属性

order： 0（默认） | 任何数字 子项在父元素中出现的顺序

flex-grow: 0 (默认) | 任何数字不能为负数 除内容以外的剩余空间按照flex-grow的值占flex-grow总值的百分比来分配

flex-shrink: 1 (默认) | 何数字不能为负数 剩余空间不足时的压缩比率，数字大的压缩的厉害，设置为0时不压缩

flex-basis: auto（默认） | width | 0 计算前刨去的空间

伸缩项分配空间 = 伸缩容器的空间 - basis设置的空间 - 其他子元素的width（若没有则为其他内容占的空间）

flex: flex-grow flex-shrink flex-basis 是以上三个的简写

flex: 1 0 auto | none | 0 （默认）

设置为none 相当于 flex：0 0 auto

设置为0 很少用

只设置第一个值其他两个不写 flex: 1 相当于 flex : 1 1 0

align-self: 每个伸缩项重置父容器设置的align-items