设为首页 - 加入收藏 焦点技术网
热搜:java
当前位置:首页 >

Flex布局实用手册

2016-03-30 14:50:35.0 java  
导读:Flex布局的知识记录&实用手册。。。
Flex布局 兼容写法: ```css .flex-box{ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ } .flex-row{ -webkit-box-orient: horizontal; box-orient: horizontal; -webkit-flex-direction: row; flex-direction: row; } .flex-col{ -webkit-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; } .flex-1{ -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; -webkit-flex:1; flex:1; } ``` 注意知识点: * 如果设置了flex-col布局,而父容器不设置高度,那么子项目显示为原内容高度 * flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 * 设置了Flex布局,float, clear, vertical-align都将失效 * 浏览器现基本支持,IE10+ * display:flex和display:box有什么区别?答:前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本,后者是2009年的语法,已经过时,是需要加上对应前缀的。 基础学习&参考阅读: * [Flex 布局教程:语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) * [Flex 布局教程:实例篇](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html) * [css-box-flex属性,然后弹性盒子模型简介](http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/) * [Flex布局学习笔记](http://my.oschina.net/luozt/blog/482048)

(编辑: 前端届的科比)

网友评论
相关文章