1.flex的基本属性
- flex-direction 主轴方向
- flex-wrap 主轴一行满了换行
- flex-flow 1和2的组合
- justify-content 主轴元素对齐方式
- align-items 交叉轴元素对齐方式//单行
- align-content 交叉轴行对齐方式//多行
1.1主轴方向flex-direction
- row（默认值）：主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在上沿
- column-reverse：主轴为垂直方向，起点在下沿
1.2
2. flex-wrap 主轴一行满了换行
- nowrap (默认值) 不换行压缩宽度
- wrap 换行
- wrap-reverses 反向换行
3.flex-flow 1和2的组合
4.justify-content 主轴元素对齐方式
- flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
- flex-end 靠着main-end对齐//参考常见术语(一般是右方向)
- center 靠着主轴居中对齐//一般就是居中对齐
- space-between 两端对齐，靠着容器壁，剩余空间平分
- space-around 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
- space-evenly 平均对齐，不靠着容器壁，剩余空间平分
5.align-items item「项目」在交叉轴上对齐方式「单轴」
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。
6. align-content 交叉轴行对齐方式 多行
这个和 justify-content 属性一模一样
- flex-start (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
- flex-end （每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
- center (每一行)靠着cross线居中对齐//一般就是居中对齐
- space-between (每一行)两端对齐，靠着容器上下壁，剩余空间平分
- space-around (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
- strentch (每一行)伸缩，占满整个高度