最近在项目中用到了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. 20155203 实验一《Java开发环境的熟悉》实验报告

    20155203 实验一<Java开发环境的熟悉>实验报告 一.实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 二.练 ...

  2. 20170531 课堂实践 MyOD

    MyOD 题目 编写MyOD.java 用java MyOD XXX实现Linux下od -tx -tc XXX的功能 Linux下od功能详解 od(octal dump)命令可以以八进制.十进制. ...

  3. 20155215 2016-2017-2《Java程序设计》课程总结

    20155215 2016-2017-2<Java程序设计>课程总结 一.(按顺序)每周作业链接汇总 预备作业1: 对于JAVA课程本身的期望和理解.以及期望的师生关系是什么样的,自己印象 ...

  4. 安装虚拟机和Linux系统的学习

    安装虚拟机和Linux系统的学习(随笔3) 1.安装虚拟机 首先我按着老师给的链接上的步骤一步一步安装VirtualBox,进行得十分顺利. 接着则是在虚拟机上安装Ubuntu. 然而安装完成以后按要 ...

  5. 20155327 学习基础和C语言基础调查

    20155327 学习基础和C语言基础调查 通过阅读老师推荐的五篇文章之后,其中有几个点引发了我的思考,便是"量变引起质变""循序渐进"以及"坚持&q ...

  6. C#目录：藏锋

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 此为C#专题的分类,只会记录我对于C#一些需求的解决方案,并非全部学习资料(全部可以参考微软提供的API) 主 ...

  7. protobuf工程的编译以及使用

    一. 获取Protocol Buffer 1.1 获得源码 Github:ProtocolBuffer源码 Git clone之:git clone https://github.com/google ...

  8. 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（中）

    接<基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(上)> 三.代码分析 1.界面初始化 bool PlaneWarGame::init() { bool bRet = fals ...

  9. Windows下Mongodb安装部署

    1.下载安装包 mongodb-win32-x86_64-enterprise-windows-64-3.6.4.zip 解压 安装失败(当前环境windows server2012 R2):已验证可 ...

  10. [转]50 Tips for Working with Unity (Best Practices)

    About these tips These tips are not all applicable to every project. They are based on my experience ...