• 父元素:
o 主轴方向 flex-direction
1. row 主轴从左向右默认值
18
2. row-revese 主轴从右向左
3. column 主轴从上到下
4. column-reverse 主轴从下到上
o 主轴方向排列方式 justify-content
1. flex-start 主轴起点默认值
2. flex-end 主轴终点
3. center 居中
4. space-between 两端对齐
5. space-around 中间的留白是两边的 2 倍
6. space-evenly 平均分配留白
o 交叉轴排列方式 align-items
1. stretch 拉伸默认值去掉子元素的高度
2. flex-start 交叉轴的起点
3. flex-end 交叉轴的终点
4. center 居中
o 换行 flex-wrap
1 .nowrap 不换行,默认值，会将子元素压缩
2 .wrap 换行
3. wrap-reverse 反向换行
o 多行之间的排列方式 align-content
1. stretch 拉伸默认值需要去掉子元素的高
2. flex-start 主轴起点依次排列
3. flex-end 主轴终点依次排列
4. center 居中
5. space-between 两端对齐
6. space-around 中间的两端的 2 倍
7. space-evenly 平均分配
• 子元素:
o 重写子项对应的交叉轴的对齐方式 align-self
1 .stretch 拉伸默认值去掉子元素的高度
2. flex-start 交叉轴的起点
3. flex-end 交叉轴的终点
4. center 居中
5. 放大 flex-grow
6. 0不放大
7. 数值填充剩余的空间
o 压缩 flex-shrink
1. 1压缩
2. 0不压缩
3. 实现导航的滚动效果
a. 子项的宽度超出了父容器的宽度
b. 设置子项不压缩 flex-shrink:0;
c. 父元素设置溢出显示滚动条 overflow-x:auto;
o 子项的宽度 flex-basis:数值+px 类似于宽度
19
o 排序 order 数值值越大越向后，可以设置负数
