弹性布局flex小结

https://caniuse.com/ 查看css某个属性的兼容情况

calc(25% - 1px)

box-sizing:center-box;向外扩展

box-sizing:border-box;向内扩展

 

父级身上的属性

display:flex;

添加浏览器前缀 -webkit-

PostCss插件 自动加前缀

 

display:-webkit-box;

 

justify-content: 子元素水平排列方式

center 居中

space-between 两端对齐

space-around 子元素拉手分布

flex-start 居左

flex-end居右

 

align-items: 子元素垂直排列方式

center 居中

flex-start 顶部

flex-end 底部

 

align-content 多行的时候,垂直排列

center 居中

flex-start 顶部

flex-end 底部

stretch 默认

 

flex-direction 排列方向

row 横向

row-reverse 横向翻过排列

column 纵向

column-reverse 纵向翻过排列

 

flex-wrap: 子元素是否在一行显示

wrap 换行(包裹)

nowrap 不换行(默认)

 

flex-flow: <flex-direction ><flex-wrap>的简写

 

子级身上的属性

flex:1 1指的是一个系数,把父级分几份,它占几分之几

子元素在划分子元素宽度,先跑除固定宽度

 

flex-grow: 定义子元素放大比例

align-self:flex-start;其实就是用来覆盖父级align-items垂直排列

order: 规定子元素的顺序,排序(数值越小越靠前)

默认值为0

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值