1、justify-content(水平对齐元素)
flex-start: 元素和容器的左端对齐
flex-end: 元素和容器的右端对齐
center: 元素在容器里居中
space-between:元素之间保持相等的距离
space-around:元素周围保持相等的距离
{
display: flex;
justify-content: flex-end;
}
2、align-items(纵向对齐元素)
flex-start: 元素与容器的顶部对齐
flex-end: 元素与容器的底部对齐
center: 元素纵向居中
baseline: 元素在容器的基线位置显示
stretch: 元素被拉伸以填满整个容器
3.flex-direction(元素在容器里摆放的方向)
row: 元素摆放的方向和文字方向一致。
row-reverse: 元素摆放的方向和文字方向相反。
column: 元素从上放到下。
column-reverse: 元素从下放到上
注意:
- 调转行或列的方向后,flex-start和flex-end对应的方向也被调转了
- 当flex以列为方向时,justify-content控制纵向对齐,align-items控制横向对齐
4.order(顺序-控制单个元素)
可为正负值,元素的属性默认值为0
.child {
order: 1;
}
5.align-self(同align-items-控制单个元素)
6.flex-wrap(换行)
nowrap: 所有的元素都在一行
wrap: 元素自动换成多行
wrap-reverse: 元素自动换成逆序的多行
注意:flex-direction和flex-wrap两个属性经常会一起使用,所以有缩写属性flex-flow
7.align-content(对齐方式)
flex-start: 多行都集中在顶部
flex-end: 多行都集中在底部
center: 多行居中
space-between: 行与行之间保持相等距离
space-around: 每行的周围保持相等距离
stretch: 每一行都被拉伸以填满容器