flex取值

flex:

(主轴方向)flex-direction:取值1,row(水平向右),2,row-reverse(水平向左),3,column(垂直向下),4,column-reverse(垂直向上)。

(主轴对齐方式)justify-content:取值1,flex-start(向主轴开始的方向对齐),2,flex-end(向主轴结束的方向对齐),3,center(居中对齐),4,space-around(让空白环绕盒子显示,1盒子2盒子2盒子1),5,space-between(让空白只在盒子中间显示,0盒子1盒子1盒子0)。

(单行侧轴对齐方式)align-items:取值1,flex-start(向侧轴开始的方向对齐),2,flex-end(向侧轴结束的方向对齐),3,center(居中对齐),4,stretch(默认值,让盒子的高度拉伸显示,如果需要拉伸显示,不能给子元素设置高度。)。

(设置是否换行)flex-wrap:取值1,nowrap(不换行),2wrap(当子元素一行放不下就换行)。设置换行后,盒子就被分为二行,每行都是在顶部显示。

(多行侧轴对齐方式)align-content:取值1,flex-start(向侧轴开始的方向对齐),2,flex-end(向侧轴结束的方向对齐),3,center(居中对齐),4,stretch(默认值,让盒子的高度拉伸显示,如果需要拉伸显示,不能给子元素设置高度。),5,space-around(让空白上下环绕盒子显示),6,space-between(让空白只在盒子中间显示,顶部和底部没有空白,中间有)。

 

posted @ 2020-06-26 10:39  xiaoxiao95  阅读(192)  评论(0编辑  收藏  举报