最近在项目中用到了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. 20155211 2016-2017-2 《Java程序设计》第一周学习总结

    20155211 2006-2007-2 <Java程序设计>第1周学习总结 教材学习内容总结 首先根据博客上的指导安装了jdk,并且首次尝试了设置环境变量path和classpath. ...

  2. # 20155224 实验三 敏捷开发与XP实践 实验报告

    20155224 实验三 敏捷开发与XP实践 实验报告 实验内容 XP基础 XP核心实践 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim ...

  3. 20155239《Java程序设计》实验二（面向对象程序设计）实验报告

    实验内容 初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O.L.I.D原则 5.了解设计模式 实验步骤 单元测试 1.三种代码: 伪代码 ...

  4. (ex)Lucas总结

    (ex)Lucas总结 普通Lucas 求 \[ C_n^m\;mod\;p \] 其中\(n,m,p\leq 10^5\)其中\(p\)为质数 公式不难背,那就直接背吧... \[ C_n^m\;m ...

  5. python 内置模块(sys)

    sys.argv           命令行参数List,第一个元素是程序本身路径sys.exit(n)        退出程序,正常退出时exit(0)sys.version        获取Py ...

  6. 一起来做Chrome Extension《一些问题》

    目录 Unchecked runtime.lastError: The message port closed before a response wa received. 使用 eval Conte ...

  7. 使用idea写ssm的时候提示源文件夹中的文件找不到

    <context:property-placeholder location="classpath:db.properties"/>这一行idea提示找不到db.pro ...

  8. 04-容器 What, Why, How

    What - 什么是容器? 容器是一种轻量级.可移植.自包含的软件打包技术,使应用程序可以在几乎任何地方以相同的方式运行.开发人员在自己笔记本上创建并测试好的容器,无需任何修改就能够在生产系统的虚拟机 ...

  9. Saving James Bond - Easy Version （MOOC）

    06-图2 Saving James Bond - Easy Version (25 分) This time let us consider the situation in the movie & ...

  10. nginx启动、停止重启

    启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root@LinuxServer sbin]# /usr/local/nginx/sbin/nginx -c /us ...