【无标题】

容器：
*

1.justify-content主轴对齐方式：*

Flex-start左对齐
Flex-end 右对齐
Space-between 每两个项目之间的距离相等
space-around 每一个两侧距离相等
Space-evevnly 每两个项目之间距离与边沿的项目距离容器之间的距离相等

*2.align-items 交叉轴对齐方式

stretch默认当项目未设置高度时或auto时，会沾满整个父容器
Center 居中对齐
flex-start 悬上 交叉轴起点
flex-end 与交叉轴终点对齐 居下
baseline 与第一行文字基线对齐*

**3.flex-direction：

row 主轴为水平方向 起点在左侧 row-reverse 主轴为水平方向 起点在右侧 column 主轴为垂直方向 column-reverse 主轴为 垂直方向 起点在下侧**

4.项目换行：

nowrap 不换行
warp 换行
warp-reverse 换行第一行在下侧

5.多根轴线对齐方式align-content：

flex-start 与交叉轴的起点对齐 整体居上 flex-end 与交叉轴的终点对齐 整体居下 center整体居中
space-between 每两行之间的距离相等 space-around 每一行两侧的距离相等 space-evenly 每两行之间的距离与第一行距离容器的距离相等
项目：

1.align-self（

单个项目在交叉轴的对齐方式）auto默认继承align-items的值
stretch默认当项目未设置高度时或auto时，会沾满整个父容器
Center 居中对齐
flex-start 悬上 交叉轴起点
flex-end 与交叉轴终点对齐 居下
baseline 与第一行文字基线对齐 ；
2.order项目排列方式：值：数字（默认为0 可正可负 值越小越靠前）；
3.Flex-grow ：项目放大比例 默认0 值：整数大于等于0的值 父容器有剩余空间不放大 ；
4.Flex-shrink ：项目缩小比例 值：默认1大于等于0 父容器空间不足的时候，等比例缩小 。 若为0 则表示不缩小；
Flex-basis：项目实际空间大小 auto；

可简写：flex ：

Flex-grow 【Flex-shrink】 【Flex-basis】加中括号可写可不写。

快捷值：
1.flex：auto flex：1 1 auto；
父容器空间有剩余，等比例放大，空间不足，等比例缩小。
2. flex：none； flex：0 0 auto；
父容器空间有剩余，比放大，空间不足，不缩小。