本教程操作系统:Windows10系统、Dell G3电脑。
flex的属性:
1、flex-direction
设置主轴的方向
属性值说明
row 默认值从左到右
row-reverse 从左到右
column 从上到下
column-reverse 从上到下
2、justify-content
设置主轴上的子元素排列方式
justify-content 属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确定好主轴是那个
属性值说明
flex-start 默认值,从头部开始(如果主轴是X轴,则从左到右)
flex-end 从尾部开始排列
center 在主轴居中对齐(如果主轴是X轴,则水平居中)
space-around 平分剩余空间
space-between 先两边贴边,再平分剩余空间(重要)
3、flex-wrap
设置子元素是否换行
默认情况下,项目都排在一条线(又称“轴线”)上。flex-wrap属性定义,flex布局中默认是不换行的
属性值说明
nowrap 默认值,不换行
wrap 换行
4、align-content
设置侧轴上的子元素排列方式(多行)
属性值 说明
flex-start 默认值,在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴的中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头,再平分剩余空间
stretch 设置子项元素高度平分父元素高度 align-items :设置侧轴上的子元素排列方式(单行)
5、align-items
设置侧轴上的子元素排列方式(单行)
属性值说明
flex-start 默认值,从上到下
flex-end 从下到上
center 挤在一起居中(垂直居中)
stretch 拉伸
6、flex-flow
flex-direction 和 flex-wrap 属性的复合属性
属性值说明
flex:子项目占的份数
align-self: 控制子项在自己侧轴的排列方式
order: 属性定义子项的排列顺序(前后顺序)
以上就是flex的属性有哪些的详细内容,更多请关注Work网其它相关文章!