最近在项目中用到了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. MySQL高级——课程大纲

    一.课程概述 总体结构概述: //特别注意本次课程目标在于写出高效的JAVA代码,而非DBA等的专业调优 各章节概述         

  2. 20155204 实验3《敏捷开发与XP实践》实验报告

    20155204 实验3<敏捷开发与XP实践>实验报告 一.实验内容与步骤 1.研究IDEA的code菜单. 老师给的任务的是把一串代码格式化,这个任务很简单.code菜单主要是关于编辑代 ...

  3. 20155318 2016-2017-2 《Java程序设计》第十周学习总结

    20155318 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 学习目标 了解计算机网络基础 掌握Java Socket编程 理解混合密码系统 掌握Java ...

  4. 【NOIP2018】提高组题解

    [NOIP2018]提高组题解 其实就是把写过的打个包而已 道路铺设 货币系统 赛道修建 旅行 咕咕咕 咕咕咕

  5. tidb测试环境安装，离线部署

    1.环境以及规划 机器:centos7.5 ; 文件系统为ext4:内存16g:cpu8核,共三个节点: ip hostname roles --- tidb tipd tikv --- tidb t ...

  6. 远程连接ejabberd的mnesia数据库

    由于服务器是server版本,所以很难直观的看到mnesia的数据.所以对于初学者来说非常的困惑. 特地在qq群中请教了别人.别人说只要pong通了就行,就能通过rpc去操作远程的mnesia数据库. ...

  7. com.genuitec.runtime.generic.jee60 is not defined 导入项目的异常

    系统加载工程后,报错Target runtime com.genuitec.runtime.generic.jee60 is not defined,在发布工程的同事电脑上正常 新导入的工程,出问题很 ...

  8. Android Studio 3.1.2 Device File Explorer nothing to show

    Android Studio 3.1.2 Device File Explorer nothing to  show 不显示 目录  ,空白 手持终端设备: Android  4.2.2  ,API1 ...

  9. 八、EnterpriseFrameWork框架基础功能之自定义报表

    本章写关于框架中的“自定义报表”,类似上章“字典管理”也是三部分功能组成,包括配置报表.对报表按角色授权.查看报表:其核心思想就是实现新增一个报表而不用修改程序代码.不用升级,只需要编写一个存储过程, ...

  10. Python接口测试实战4（上） - 接口测试框架实战

    如有任何学习问题,可以添加作者微信:lockingfree 课程目录 Python接口测试实战1(上)- 接口测试理论 Python接口测试实战1(下)- 接口测试工具的使用 Python接口测试实战 ...