最近在项目中用到了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/

【移动端debug-2】Flexbox在移动端的兼容实践的更多相关文章

  1. 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试

    记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...

  2. Asp.net SignalR 实现服务端消息推送到Web端

              之前的文章介绍过Asp.net SignalR,  ASP .NET SignalR是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.  今天我 ...

  3. Vue（SPA） WebPack模块化打包、SEO优化（Vue SSR服务端同构直出）、全浏览器兼容完整解决方案

    白驹过隙,时光荏苒 大概去年这个时候写了angular 结合webpack的一套前端方案,今年此时祭出vue2结合webpack的一套前端方案. 明年的这个时候我又是在做什么... 读在最前面: 1. ...

  4. BluetoothLE-Multi-Library 一个能够连接多台蓝牙设备的库，它可以作为client端，也可以为server端。支持主机／从机，外围设备连接。

    github地址:https://github.com/qindachang/BluetoothLE-Multi-Library BluetoothLE-Multi-Library 一个能够连接多台蓝 ...

  5. 监听微信端，手机端，ios端的浏览器返回事件，pc端关闭事件

    直接上代码了,可以监听微信端,手机端,iOS端的浏览器返回事件,关闭事件不支持 当进入该页面,我们就给这个history压入一个本地的连接.当点击返回.后退及上一页的操作时,就进行监听,在监听代码中实 ...

  6. 【输入法】向Android端Gboard字典中导入PC端搜狗细胞词库

    [输入法]向Android端Gboard字典中导入PC端搜狗细胞词库 环境 Android 5.1.1 Gboard 8.7.10.272217667-release -armeabi-v7a PC端 ...

  7. 关于emoji表情，支持在app端发送web端显示，web端发送给app端显示，web与wap端互相显示。

    要用到emoji.js和emoji.jquery.js两个插件配合实现三端互通. 1.app端发送的emoji表情----到服务器---服务器存储的是‘问号’,无法显示如图所示: 后台的同学也试验了网 ...

  8. zabbix配置文件详解--服务（server）端、客户（agent）端、代理（proxy）端

    在zabbix服务(server)端.客户(agent)端.代理(proxy)端分别对应着一个配置文件,即:zabbix_server.conf,zabbix_agentd.conf,zabbix_p ...

  9. 移动端全兼容的flexbox速成班

    说起flexbox,都算是件陈年旧事了,它是2009年W3C提出的一种全新的可伸缩的CSS布局方式.依赖flexbox,我们可以更简单,高效的完成可伸缩式页面的布局. 业界与flexbox的相关教程文 ...

随机推荐

  1. 深入Redis 主从复制原理

    原文:深入Redis 主从复制原理 1.复制过程 2.数据间的同步 3.全量复制 4.部分复制 5.心跳 6.异步复制 1.复制过程 从节点执行 slaveof 命令. 从节点只是保存了 slaveo ...

  2. Zabbix学习之路（九）之低级自动发现以及MySQL多实例

    1.概述 Zabbix的网络发现是指zabbix server通过配置好的规则,自动添加host,group,template Zabbix的主动注册刚好和网络发现是相反的,功能基本一致.zabbix ...

  3. spring源码-aop-5

    一.在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发 ...

  4. Firefox开发

    官方文档 First extension 目录结构 ➜ firefox tree . └── borderify └── manifest.json // 必须 directory, files ma ...

  5. php 操作 oracle lob 数据2

    CREATE SEQUENCE mylobs_id_seq    NOMINVALUE    NOMAXVALUE    NOCYCLE    CACHE 20    NOORDERINCREMENT ...

  6. javascript 强制转换规则 boolean 布尔值类型

    摘自 <你不知道的Javascript(中卷)> p55 一句话简述, 假值表以外的值均可以认为是真值,部分浏览器可能自定义了假值表以外的假值,并不符合W3C规范,需要特殊对待. 首先也是 ...

  7. SST:Single-Stream Temporal Action Proposals论文笔记

    SST:Single-Stream Temporal Action Proposals 这是本仙女认认真真读完且把算法全部读懂(其实也不是非常懂)的第一篇论文 CVPR2017 一作 论文写作的动机m ...

  8. Amazon Headlines Update on Activity in US West Coast Ports

    According to news reports, freighter cargo may not be offloaded at U.S. West Coast ports from Februa ...

  9. ASP.NET Web API - 使用 Castle Windsor 依赖注入

    示例代码 项目启动时,创建依赖注入容器 定义一静态容器 IWindsorContainer private static IWindsorContainer _container; 在 Applica ...

  10. sqoop 常用命令集

    sqoop是一个介于分布式数据系统与关系型系统之间数据转换的一个数据转换工具 常用命令集sqoop2中sqoop-shell 创建link.job sqoop:001> show link 显示 ...