容器属性
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
网友评论