Promotions
Estimated Shipping
Flash Builder 4.6
快速构建具有表现力的移动、网络和桌面应用程序。Flexbox在移动端的兼容实践 - 推酷
Flexbox在移动端的兼容实践
最近在项目中用到了flexbox，总结一下使用心得。
一、什么是flexbox，干嘛使的？
曾几何时，我们特别希望能像word一样，在排版时有个分散对齐选项（平均分配子元素宽度）这样我就可以任意在父元素里添加子元素的个数，而不用经过繁琐的计算。
css3中的flexbox可以实现这一点，并且还有很多很多别的高端上档次的用法，包括垂直居中、反向排列子元素等等……本文先介绍其中一种比较常用到的方法，别的案例碰到了再补充。
二、flexbox的兼容性问题
由于历史原因，flexbox的标准比较混乱，目前通用的版本就有三种：
老版本：display:box 和 display:inline-box（前者是块级元素，后者是内联元素）
混合版本（该版本仅ie10支持，移动端完全不用考虑）：display:flexbox 和 display:inline-flexbox（同上）
新版本：display:flex 和 display:inline-flex（同上）
每种版本的支持的浏览器不同，而且要针对不同浏览器添加前缀适配，为了兼容移动端的大部分浏览器，提炼如下：
display: -webkit-
/* 老版本 - 适配iOS 6-, Safari 3.1-6 */
display: -webkit-
/* 新版本 - 适配Chrome */
/* 新版本,- 适配Opera 12.1, Firefox 20+ */
在这里他们的顺序非常重要。“display”属性本身并不添加任何浏览器前缀，我们需要确保我们老语法不要覆盖新语法让浏览器（可能总是会）同时支持。
三、使用方法：
要使用flex需要先了解以下概念：
1、 伸缩盒子和伸缩项目 ：伸缩盒子就是父元素，伸缩项目就是子元素，只有先设置了父元素为flexbox，子元素里的伸缩相关属性才能生效。
2、 主轴和侧轴 ：页面横向的轴是主轴，纵向的轴是侧轴。
3、 伸缩流 ：伸缩盒子内的元素排列方式，类似流水顺序一样，因此称之为流。
由于flex的属性繁多，一上来就列举一堆属性概念不方便阅读学习，下面直接通过案例来了解flex是怎么用的，这样能先对这个css3的新属性有个直观的了解，之后可以自行查阅其他属性。
案例：设置一个伸缩盒子（父元素），无论添加多少个伸缩项目（子元素），都让它们平均分配宽度，如图：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&meta name=&viewport& content=&width=device-width, initial-scale=1.0, user-scalable=no&&
&title&&/title&
.flex-parent {
/*设置父元素为伸缩容器*/
display: -webkit- /*老版本：iOS 6-, Safari 3.1-6*/
display: -webkit- /*新版本：Chrome*/
display: /*标准规范：Opera 12.1, Firefox 20+*/
/*设置父元素内部的伸缩子元素项目换行规则：水平排列（row）不换行（nowrap）*/
-webkit-box-orient: /*老版本：iOS 6-, Safari 3.1-6*/
-webkit-flex-flow: /*新版本：Chrome*/
flex-flow: /*标准规范：Opera 12.1, Firefox 20+*/
.flex-son {
/*设置子元素伸缩项目的伸缩比例*/
-webkit-box-flex: 1; /*老版本：iOS 6-, Safari 3.1-6*/
-webkit-flex: 1; /*新版本：Chrome*/
flex: 1; /*标准规范：Opera 12.1, Firefox 20+*/
/*此处无需设置宽度，因为flexbox会自动伸缩*/
margin: 0 0.5
background: #000;
&div class=&flex-parent&&
&div class=&flex-son&&&/div&
&div class=&flex-son&&&/div&
&div class=&flex-son&&&/div&
更多flexbox的使用方法可参考大漠的《图解CSS3》及w3c的flexbox标准原文http://www.w3.org/TR/2015/WD-css-flexbox-1-/
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}