Flex布局父项常用属性总结

Flex布局父项常用属性总结

08112

Flex布局常见于各个网站之中,现总结几个常用布局属性,方便以后使用

1.flex-direction

属性值说明
row从左到右(默认值)
row-reverse从右到左
column从上到下
column-reverse从下到上

2.justify-content

该属性定义了项目在主轴上的对齐方式

注意:使用前必须确认主轴是哪一个

属性值说明
flex-start默认值 从头部开始 如果主轴是x,则从左到右
flex-end从尾部开始排列
center在主轴居中对齐(主轴是x 水平居中)
space-around平分剩余空间
space-between两边贴边,再平分剩余空间

3.flex-wrap

默认情况下,项目都排在一条线上。flex-wrap属性定义,flex布局中默认是不换行的

属性值说明
nowrap默认值,不换行
wrap换行

4.align-items

该属性是控制子项在侧轴(默认y轴)上的排列方式,在子项为单项(单行)的时候使用

属性值说明
flex-start默认值,从上到下
flex-end从下到上
center挤在一起居中(垂直居中)
stretch拉伸(子盒子不要给高度)

5.align-content

设置侧轴上的子元素排列方式,并且只能用于子项出现换行的情况(多行),单行下没有效果

属性值说明
flex-start默认值在侧轴的头部开始排列
flex-end在侧轴的尾部开始排列
center在侧轴中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布在两头,在平分剩余空间
stretch设置子项元素高度平分父元素高度

单行用align-items,多行用align-content

6.flex-flow

flex-directionflex-wrap属性的复合属性

例如:flex-flow:row wrap

© 版权声明
THE END
喜欢就支持一下吧
点赞12
分享
评论 抢沙发

请登录后发表评论