flex父容器属性
flex-direction
主轴方向
row:从左到右
row-reverse:从右到左
column:从上到下
column-reverse:从下到上
1
2
3
4
5
flex-wrap
子元素是否换行
nowrap:不换行
wrap:换行
1
2
3
4
5
align-items
单行子盒子在侧轴上的对齐方式
flex-start:侧轴开始
flex-end:侧轴结束
center:居中
stretch:拉伸(默认值)
1
2
3
4
5
justify-content
子盒子主轴方向上的对齐方式
flex-start:主轴开始
flex-end:主轴结束
space-between:两端对齐，子盒子之间的间隔都相等。
center:居中
space-around:每个项目两侧的间隔相等。
1
2
3
4
5
align-content
多行子盒子在侧轴上的对齐方式
flex-start:侧轴开始
flex-end:侧轴结束
center:居中
space-between:两端对齐，侧轴之间的间隔平均分布。
space-around:侧轴之间的间隔平均分布。
stretch:拉伸(默认值)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
flex布局子元素属性
flex
子元素占用份数
.item { flex: number }
item1
item2
flex: 份数
flex: 份数
1
2
order
定义项目的排列顺序。数值越小，排列越靠前，默认为0。
item 1:
item 2:
item 3:
item 4:
item 5:
1
2
3
4
5