【移动端debug-2】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-box;      /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
display: -webkit-flex;     /* 新版本 - 适配Chrome */
display: flex;             /* 新版本,- 适配Opera 12.1, Firefox 20+ */

在这里他们的顺序非常重要。“display”属性本身并不添加任何浏览器前缀,我们需要确保我们老语法不要覆盖新语法让浏览器(可能总是会)同时支持。

 

三、使用方法:

要使用flex需要先了解以下概念:

1、伸缩盒子和伸缩项目:伸缩盒子就是父元素,伸缩项目就是子元素,只有先设置了父元素为flexbox,子元素里的伸缩相关属性才能生效。

2、主轴和侧轴:页面横向的轴是主轴,纵向的轴是侧轴。

3、伸缩流:伸缩盒子内的元素排列方式,类似流水顺序一样,因此称之为流。

 

由于flex的属性繁多,一上来就列举一堆属性概念不方便阅读学习,下面直接通过案例来了解flex是怎么用的,这样能先对这个css3的新属性有个直观的了解,之后可以自行查阅其他属性。

案例:设置一个伸缩盒子(父元素),无论添加多少个伸缩项目(子元素),都让它们平均分配宽度,如图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <title></title>
    <style>
        .flex-parent {
            /*设置父元素为伸缩容器*/
            display: -webkit-box; /*老版本:iOS 6-, Safari 3.1-6*/
            display: -webkit-flex; /*新版本:Chrome*/
            display: flex; /*标准规范:Opera 12.1, Firefox 20+*/

            /*设置父元素内部的伸缩子元素项目换行规则:水平排列(row)不换行(nowrap)*/
            -webkit-box-orient: horizontal; /*老版本:iOS 6-, Safari 3.1-6*/
            -webkit-flex-flow: row nowrap; /*新版本:Chrome*/
            flex-flow: row nowrap; /*标准规范: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会自动伸缩*/
            height: 2rem;
            margin: 0 0.5rem;
            background: #000;
        }
    </style>
</head>

<body>

<div class="flex-parent">
    <div class="flex-son"></div>
    <div class="flex-son"></div>
    <div class="flex-son"></div>
</div>

</body>
</html>

 更多flexbox的使用方法可参考大漠的《图解CSS3》及w3c的flexbox标准原文http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/

posted @ 2015-11-01 00:38  水乙  阅读(3632)  评论(0编辑  收藏  举报