1. 方向 flex-direction
{
display: flex;
flex-direction: row
}
row水平方向column垂直方向-reverse反向
2. 自动换行 flex-wrap
flex-wrap: wrap;
3. 主轴对齐 justify-content
justify-content: flex-start;
- center 居中
- start 行首 | flex-start 行首 | left 左对齐
- end 行尾 | flex-end 行尾 | right 右对齐
- baseline 基线
- space-between 均匀分布 两侧不留
- space-around 两边留一点 | space-evenly 两边间隔更大
4. 交叉轴对齐 align-item
{
display: flex;
align-items: center;
}
- center 居中
- flex-start 开头
- flex-end 结尾
- baseline 基线
5. 多行交叉轴 align-content
- flex-start 上面
- flex-end 下面
- center 居中
- space-between 上下分布
6. 自身对齐
每个元素单独设置在flex中的位置
.item
{ align-self:center; }
- stretch/auto 拉伸
7. 元素初始大小 flex-basis
更常用width
- auto 继承width值
- ??px 指定值
- 0 以内容为主
8. 增长因数 flex-grow
.item{flex-grow: 3;} 默认是0
9. 缩小因数 flex-shrink
.item{flex-shrink: 1;} 默认是1
数字越大，缩小的越快
10. flex属性
.item{flex: 2;}
- 单个数字 = grow+shrink
- 一个px = basis值 + 增长因数=1
- 一个整数一个px = grow + basis
- 两个整数 = grow + shrink
- 两个整数一个px = 完整版 grow shrink basis
11. 排序 order
数字大的在后面（不怎么用）
