一、概述

浮动在移动布局中不再重要，flex盒模型越来越重要。

flexbox经历过三个版本，主要区别是2009年到2012年之间的语法变化。

最新的语法和现在规范是同步的（例display:flex和“flex-{*}”属性）。

在这之间的语法是2011年出现的非官方语法，只能被IE识别（例display:flexbox;display: -ms-flexbox）。

最老的语法产生于2009年（例display: box;或者“box-{*}”属性）

- W3C 2009年第1次草案：[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
- W3C 2011年第2次草案：[display:flexbox | inline-flexbox;](https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/)
- W3C 2012年第5次草案及以后的候选推荐标准：[display:flex | inline-flex;](https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/)

二、flex常用属性

1、用于父元素的样式

-webkit-box模型【旧】

display:-webkit-box 该属性会将此元素及其直系子代加入弹性框模型中。
box-orient:horizontal|vertical|inline-axis|block-axis|inherit;该属性定义父元素中的子元素是如何排列的。horizontal对父元素的宽度分配划分。
box-pack:start|end|center|justify;box-pack表示父容器里面子容器的水平对齐方式
box-align:start|end|center|baseline|stretch;表示父容器里面子容器的垂直对齐方式。

flex模型【新】

display:flex; flexbox模型只适用于直系子代
flex-direction: row | row-reverse | column | column-reverse;子元素是如何排列
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;子元素水平排列方式
align-items: flex-start | flex-end | center | baseline | stretch;子元素垂直排列方式
flex-wrap: nowrap | wrap | wrap-reverse;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

2、用于子元素的样式

【旧】box-flex:0|任意数字；该属性让子容器针对父容器的宽度按一定规则进行划分。

【新】flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ],默认值 0 1 auto。

三、快速入门demo

1、子元素水平排列，按比例分割父元素宽度

.parent宽度500px，其子元素水平排列，child-one占1/6，child-two占2/6，child-three占了3/6。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .parent{

            width: 500px;

            height: 200px;

            display: flex;

            flex-direction: row;/* 虽然默认的排列方式是水平的，但是为了区分起见，加上该属性 */

        }

        .child-one{

            background: lightblue;

            flex: 1;

        }

        .child-two{

            background: lightgray;

            flex: 2;

        }

        .child-three{

            background: lightgreen;

            flex: 3;

        }

    </style>

</head>

<div style="display:flex;flex-direction:row;justify-content:center;border: 1px solid #000;"><!---box-pack:center让.parent水平居中-->

    <div class="parent">

        <div class="child-one">1</div>

        <div class="child-two">2</div>

        <div class="child-three">3</div>

    </div>

</div>

</body>

</html>

2、子元素水平排列，一个子元素定宽，剩余子元素按比例分割

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .parent{

            width: 500px;

            height: 200px;

            display: flex;

            background-color:pink;

            flex-direction: row;/* 虽然默认的排列方式是水平的，但是为了区分起见，加上该属性 */

        }

        .child-one{

            background: lightblue;

            flex: 1;

        }

        .child-two{

            background: lightgray;

            flex: 2;

        }

        .child-three{

            background: lightgreen;

            /*定宽，并加上左右margin,父元素加上粉色背景色更好理解*/

            width:150px;

            margin:0 15px;

        }

    </style>

</head>

<div style="display: flex;justify-content: center;border: 1px solid #000;"><!--justify-content:center让.parent水平居中-->

    <div class="parent">

        <div class="child-one">1</div>

        <div class="child-two">2</div>

        <div class="child-three">3</div>

    </div>

</div>

</body>

</html>

3、子元素垂直排列，分割父元素高度

.parent中的子元素垂直排列，所以每个子元素宽度占100%。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .parent{

            width: 400px;

            height: 600px;

            display: flex;

            background-color:pink;

            flex-direction: column;/*子元素垂直排列 */

        }

        .child-one{

            background: lightblue;

            flex: 1;

        }

        .child-two{

            background: lightgray;

           flex: 2;

        }

        .child-three{

            background: lightgreen;

            /*定高，有上下margin,父元素加上粉色背景色更好理解*/

            height:200px;

            margin:15px 0;

        }

    </style>

</head>

<body>

<div style="display: flex;justify-content: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中-->

    <div class="parent">

        <div class="child-one">1</div>

        <div class="child-two">2</div>

        <div class="child-three">3</div>

    </div>

</div>

</body>

</html>

4、子元素水平排列，定高垂直方向居中对齐

父元素中子元素水平排列，子元素定高时设置垂直方向对齐方式为居中对齐。

重点：align-item:center,以前布局用box-align:center;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .parent{

            width: 400px;

            height: 200px;

            display: flex;

            background-color:pink;

            flex-direction: row;

            align-items: center;

        }

        .child-one{

            background: lightblue;

            flex: 1;

            height:100px;

        }

        .child-two{

            background: lightgray;

            flex: 2;

            height:110px;

        }

        .child-three{

            background: lightgreen;

            flex: 2;

            height:120px;

        }

    </style>

</head>

<body>

<div style="display: flex;justify-content: center;border: 1px solid #000;"><!--justify-content:center让.parent水平居中-->

    <div class="parent">

        <div class="child-one">1</div>

        <div class="child-two">2</div>

        <div class="child-three">3</div>

    </div>

</div>

</body>

</html>

四、经典布局

flexbox经典的布局应用是垂直等高，水平均分，按比例划分，水平垂直居中，还可以实现移动端的弹窗。

1、垂直等高,水平均分，按比例划分

.parent{display: -webkit-box; display: -webkit-flex; display: flex;}

.child{-webkit-box-flex:; -webkit-flex:; flex:;}

完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .parent{

        display: flex;

        height:100px;

        width:150px;

        background-color:pink;}

        .child{

        flex: 1;

        border:1px solid green;

        }

    </style>

    <div class="parent">

      <div class="child"></div>

      <div class="child"></div>

      <div class="child"></div>

    </div>

</body>

</html>

2、水平居中

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}

完整demo:

<style>

    .parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center;

    -webkit-justify-content: center; justify-content: center;

    height:100px;

    width:150px;

    background-color:pink;}

    .child{

    width:50px;

    height:50px;

    border:1px solid green;

    }

</style>

<div class="parent">

  <div class="child"></div>

</div>

3、垂直居中

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}

完整demo

<style>

    .parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center;

    -webkit-align-items: center; align-items: center;

    height:100px;

    width:150px;

    background-color:pink;}

    .child{

    width:50px;

    height:50px;

    border:1px solid green;

    }

</style>

</head>

<body>

<div class="parent">

  <div class="child"></div>

</div>

4、移动端弹窗

现在移动端很多弹窗组件使用flexbox来实现，直接嵌套div.overlay>div.pop。

<style>

    .overlay{

    /*flex style*/

    display:-webkit-box;

    -webkit-box-orient:horizontal;

    -webkit-box-pack:center;

    -webkit-box-align:center; 

    display:-moz-box;

    -moz-box-orient:horizontal;

    -moz-box-pack:center;

    -moz-box-align:center; 

    display:-o-box;

    -o-box-orient:horizontal;

    -o-box-pack:center;

    -o-box-align:center; 

    display:-ms-box;

    -ms-box-orient:horizontal;

    -ms-box-pack:center;

    -ms-box-align:center; 

    display:box;

    box-orient:horizontal;

    box-pack:center;

    box-align:center;

    display: -webkit-flex;

    -webkit-align-items: center;

    -webkit-justify-content: center;

    display: flex;

    align-items: center;

    justify-content: center;

    /*other style*/

    width:100%;

    max-width:750px;

    height:100%;

    position:fixed;

    top:0;

    left:0;

    background:rgba(0,0,0,0.5);

    }

    .popup{

    width:90%;

    max-width:650px;

    border:1px solid green;

    padding:20px 4% 4% 4%;

    box-sizing:border-box;

    height:auto;

    background:#fff;

    border-radius:4px;

    position:relative;

    }

    .popup-close{

    width:15px;

    height:14px;

    background:url(image/close.png) no-repeat;

    background-size:100% 100%;

    position:absolute;

    top:8px;

    right:8px;

    }

</style>

主页面的文字

<div class="overlay">

  <div class="popup">

  <a href="javascript:;" class="popup-close"></a>

  弹层的文字

  </div>

</div>

五、兼容性

PC端：

无前缀：Chrome 29+, Firefox 28+, IE 11+, Opera 17+
需要前缀：Chrome 21+, Safari 6.1+, Opera 15+需要前缀-webkit-

提示：旧版本的Firefox（22-27）支持除了flex-wrap和flex-flow之外的新语法。Opera (12.1+ - 17+)使用flex可以没有私有前缀，但是中间的15和16版本需要私有前缀。

移动端：

无前缀：Android 4.4+, Opera mobile 12.1+, BlackBerry 10+, Chrome for Android 39+, Firefox for Android 33+, IE 11+ mobile
需要前缀：iOS 7.1+需要前缀-webkit-

六、资源链接

display:-webkit-box

A Complete Guide to Flexbox

探索Flexbox

时下Web App中的Flexbox应用

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4894140.html有问题欢迎与我讨论，共同进步。

flex布局简介的更多相关文章

flex布局总结回顾
1.背景传统css盒式模型,依赖 display属性 + position属性 + float属性实现页面的布局,而随着互联网的迅猛发展,带动了无数的互联网创业者和互联网产品,因而样式布局的美化成为 ...
Flex布局做出自适应页面--语法和案例
本文发布在: github项目地址:https://github.com/tenadolanter/flex-layout-demo SegmentFault地址:https://segmentfau ...
CSS学习笔记：flex布局
目录一.Flex布局简介 1. Flex布局的主要作用 2. Flex布局应用场景二.Flex布局的使用 1. Flex布局的两种相关元素 2. 父项属性 2.1 flex- direction ...
FLEX布局的一些问题和解决方法
前言露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...
[flex布局]-flex教程
简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...
CSS3弹性伸缩布局（二）——flex布局
上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介新版本的Flexbox模型是2012年9 ...
[flex 布局]——flex教程
简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...
Flex布局（一）flex-direction
采用Flex布局的元素,被称为Flex容器(flex container),简称"容器".其所有子元素自动成为容器成员,成为Flex项目(Flex item),简称"项目 ...
es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法响应式图像弹窗细节微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性参数传递的四种形式
es6 Object.assign 目录一.基本用法二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值三.浏览器支持 ES6 O ...

随机推荐

Git 设置过滤忽略的文件或文件夹(ignore file)
我们一般向代码仓库提交项目的时候,一般需要忽略编译生成的中间文件以及文件夹的提交,因为它们是无用的,而且也会占用仓库的空间.一般只用提交.pro,.sln,makefile,程序源文件等编译必须用到的 ...
用命令行发布android程序
在开发android程序的过程中,我们使用ant debug和ant installd这两个命令就够了,不涉及到APK的签名. 但是在正式发布我们的Android程序时,需要对APK签名.ant re ...
WPS, 破解WPA/WPA2密钥的捷径
1.关于WPS(WIFI保护设置) WPS(WIFI保护设置)主要致力于简化无线网络的安全加密设置. 传统方式下,用户新建一个无线网络时,必须在接入点手动设置网络名(SSID)和安全密钥,然后在客户端 ...
django错误笔记（xadmin）——AttributeError: 'Settings' object has no attribute 'TEMPLATE_CONTEXT_PROCESSORS'
使用Xadmin,执行makemigrations和migrate时运行报错提示: AttributeError: 'Settings' object has no attribute 'TEMPLA ...
Exception in thread "main" java.lang.NoSuchMethodError: scala.Predef$.refArrayOps([Ljava/lang/Object;)Lscala/collection/mutable/ArrayOps;
Exception in thread "main" java.lang.NoSuchMethodError: scala.Predef$.refArrayOps([Ljava/l ...
Struts局部异常与全局异常处理
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAowAAAG3CAIAAACxBJNyAAAgAElEQVR4nOy9z6tk15Ymdv4B0eRU8O
mysql 索引无法使用问题
今天碰到一个问题,表中有一个索引不使用,怎么强制也没用 ,force index都没用, 后来才发现是类型不对, 比如索引字段是int,如果参数使用varchar,那么是无法使用索引的,参数类型最好统 ...
Linux分区设置
基本3个就可以了序号路径大小格式 ① /boot 200MB ext4 ② 物理内存*1-1.5 swap ③ / 剩余存储空间 ext4
java中网络设置代理
三种方式: 1.JVM启动时加参数设置代理在系统启动时,使用-D项来设置代理. 例如: java -Dhttp.ProxyHost="proxyUrl" -Dhttp.Proxy ...
Linux内存管理1---内存寻址
1.前言本文所述关于内存管理的系列文章主要是对陈莉君老师所讲述的内存管理知识讲座的整理. 本讲座主要分三个主题展开对内存管理进行讲解:内存管理的硬件基础.虚拟地址空间的管理.物理地址空间的管理. 本 ...

flex布局简介