CSS3弹性盒模型新版和老版写法差异
1、在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box:
新版弹性盒模型:flex:display : flex
老版弹性盒模型:box : display : -webkit-box
2、box-orient 定义盒模型的主轴方向
新版:flex:flex-direction: row / column
老版:box : -webkit-box-orient:
horizontal 水平显示
vertical 垂直方向
3、box-direction 元素排列顺序
新版:flex : flex-direction: row-reverse / column-reverse;
老版:box : -webkit-box-direction:
normal 正序
reverse 反序
4、box-pack 主轴方向富裕的空间管理
新版:flex : justify-content : flex-start / flex-end / center / space-between / space-around;
老版:box : -webkit-box-pack
start 所有子元素在盒子左侧显示,富裕空间在右侧
end 所有子元素在盒子右侧显示,富裕空间在左
center 所有子元素居中
justify 富裕空间在子元素之间平均分布
5、box-align 侧轴方向方向富裕的空间管理
新版:flex : align-items : flex-start / flex-end / center / baseline
老版:box : -webkit-box-align
star 所有子元素在据顶
end 所有子元素在据底
center 所有子元素居中
6、Box-flex 定义盒子的弹性空间
新版:flex : flex-grow
老版:box : -webkit-box-flex
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
7、box-ordinal-group 设置元素的具体位置
新版:flex : order
老版:box : -webkit-box-ordinal-group
最新文章
- github设置只识别指定类型的文件
- Spring 4集成 Quartz2(转)
- Apache-Commons包作用说明
- 重构第23天 引用参数对象(Introduce Parameter Object)
- 利用mciSendString播放音频
- Jenkins进阶系列之——09配置Linux系统ssh免密码登陆
- PHP 获取文件权限函数
- Maven安装与更新
- [HNOI2010]CHORUS 合唱队
- 被sleep开了个小玩笑
- appnium启动报错Encountered internal error running command: Error: Error occured while starting App. Original error: Permission to start activity denied.
- 学习Struts--Chap07:Struts2文件上传和下载
- php 日期处理 DateTime
- VueJs相关命令
- 数据仓库专题(2)-Kimball维度建模四步骤
- Docker端口映射(六)
- asp.net core 系列之用户认证(1)-给项目添加 Identity
- 哪些地方会出现css阻塞,哪些地方会出现js阻塞?
- 【代码审计】iCMS_v7.0.7 search.admincp.php页面存在SQL注入漏洞
- WKWebView 里 JS 和 native 通信的例子