flex弹性布局

flex布局父项常见属性

flex-direction:设置主轴的方向,剩下的是侧轴

默认是row,沿着x轴排列
column,沿着y轴排列

justify-content:设置主轴上子元素排列方式
项目 Value
flex-start,flex-end 设置头或尾对齐
center 居中对齐
space-around 平均分配剩余空间
space-between 先两边贴边再平均分配剩余空间
flex-warp:设置子元素是否换行

默认不换行

align-content:设置侧轴上的子元素排列方式(多行)

适用于子项出现换行的情况,在单行下没有效果

项目 Value
flex-start,flex-end 设置侧轴头或尾对齐
center 在侧轴中间显示
space-around 平均分配剩余空间
space-between 先两边贴边再平均分配剩余空间
stretch 设置子元素高度平分父元素高度
align-items:设置侧轴上的子元素排列方式(单行)
项目 Value
flex-start 默认值从上到下
flex-end 从下到上
center 挤在一起居中
stretch 拉伸
flex-flow:复合属性,相当于同时设置了flex-warp,和flex-direction

flex-flow:row wrap

子项常见属性

flex

子项目占的份数,可以是数字或者百分号

align-self

控制子项自己在侧轴的排列方式

order

定义子项的排列顺序,默认是0

发布了70 篇原创文章 · 获赞 2 · 访问量 2万+

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览