容器属性

1:flex-direction属性

用于设置主轴方向

row(默认值) //水平方向从左到右
row-reverse //row的反方向
column //垂直方向从上而下
column-reverse //column的反方向

2:flex-wrap属性

用于规定是否允许项目换行,以及多行[排列时换行的方向

nowrap(默认值) //不换行(宽度压缩)
wrap //换行
wrap-reverse //wrap的反方向

3:justify-content属性

用于设置项目在主轴方向的对齐方式,以及分配项目之间及其周围多余的空间

flex-start(默认值) //项目对其主轴起点,项目间不留空隙
center //项目在主轴上居中排列,项目间不留空隙
space-between //项目间距相等,起点/终点距离为0
space-around //与space-between相似,起点/终点距离为中间项目间距一半
space-evenly //起点/终点/项目间距均相等

flex-start

image.png

center

image.png
space-between
image.png

space-around

image.png