你们等了很久的弹性布局（flex），还不快来~！

传统的布局方案中，我们基本都是在基于盒模型，依赖dispaly（显示）、position（定位）以及float（浮动）等属性来操作。但是这些操作需要用到一些特殊的布局上就会显得不方便了，比如，我们最常见的模块垂直居中的实现就不是很容易。而正是针对这些不易实现的布局，我们今天就跟大家分享一种简单好用的布局方式——弹性布局(flex)，一起来学习吧~~~

flex布局的由来

flex是flexible box的缩写，意思是“弹性布局”，用来为操作盒模型提供丰富的灵活性。早在2009年，W3C就已经提出这种简单、完整、响应式实现各种页面的布局。目前来说，大部分的浏览器也已经得到了兼容，大家可以安全的去使用了。浏览器兼容如下：

什么是flex布局

flex布局定义

flex布局能更加轻松地实现复杂网页布局，并且可以在屏幕和浏览器窗口大小发生变化时进行调整以保持元素的相对位置和大小（即响应式操作）。

采用flex布局的元素，称为flex容器（flex container），简称“容器”。页面中的任何一个容器（标签）都可以指定为flex布局，例如：.box {display: flex;}。容器中所有的子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex布局表现形式

flex容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿着主轴排列，即水平排列，效果图如下：

flex的容器属性

常用的容器属性有flex-direction（排列）、flex-wrap（换行）、flex-flow(属性合写)等。

flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

书写形式：flex-direction: row | row-reverse | column | column-reverse; 主要属性值介绍如下：

• row（默认值）：主轴为水平方向，起点在左端；
• row-reverse：主轴为水平方向，起点在右端；
• column：主轴为垂直方向，起点在上沿；
• column-reverse：主轴为垂直方向，起点在下沿。

代码案例如下：属性值使用与效果展示：

.wrap {
    display: flex;
    flex-direction: row/row-reverse/column/column-reverse;
    width: 750px;
    height: 100px;
    margin: 100px auto;
}
.wrap p {
    border: 1px solid red;
}
<div class="wrap">
    <p>flex-direction属性决定主轴的方向</p>
    <p>flex-direction属性决定主轴的方向</p>
    <p>flex-direction属性决定主轴的方向</p>
</div>

代码案例效果展示：

flex-wrap属性

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

书写形式：flex-wrap: nowrap | wrap | wrap-reverse; 主要属性值介绍如下：

• nowrap（默认）：不换行；
• wrap：换行，第一行在上方；
• wrap-reverse：换行，第一行在下方。

代码案例如下：属性值使用与效果展示：

.wrap {
    display: flex;
    flex-wrap: wrap/wrap-reverse;
    width: 300px;
    height: 60px;
    margin: 30px auto;
}
.wrap p {
    border: 1px solid red;
}
<div class="wrap">
    <p>flex-wrap决定了新行堆叠的方向第一行</p>
    <p>flex-wrap决定了新行堆叠的方向第二行</p>
    <p>flex-wrap决定了新行堆叠的方向第三行</p>
</div>

代码案例效果展示：

flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式。属性的介绍参看上面的两个属性，此处不再赘述，仅说明下属性的写法。

默认值为row(水平左方向) nowrap(不换行)

书写如下：flex-flow: row nowrap;

flex的项目属性

常用的项目元素属性有flex-grow(放大比例)、flex-shrink(缩小比例)、flex-basis(主轴空间)、flex(属性合写)等。下面先来介绍这几个属性的概念以及写法，最后再合起来展示一个案例。

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

书写形式：flex-grow: <值>;

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

书写形式：flex-shrink: <值>;

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小，此处书写负值无效。

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间大小（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

书写形式：flex-basis: <值>

此属性的值可以设为跟width属性一样的值，px、%都支持。

flex属性

flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性的在介绍如下表：

接下来就通过一个案例来复习并巩固弹性布局中所有的属性的使用吧，下面的这个案例是一个网站的基本结构，实现了在浏览器大小变化下的响应式布局，这也是当前很多网站的一个实现方式，一起来写吧~

html, body {
    font-family: "Arial";
    font-size: 20px;
    background: #EDEDED;
}
#flexContainer {
    display: flex;
} 
.wrap header  {
    background: #707070;
    min-height: 100px;
    margin: 3px;
    padding: 3px;
}
.wrap nav {
    background: #C9BFBF;
    flex: 1 1 15%;
    min-width: 150px;
    margin: 3px;
    padding: 3px;
}
.wrap aside {
    background: #C9C9C9;
    flex: 1 1 15%;
    min-width: 150px;
    padding: 3px;
    margin: 3px;
}
#content {
    min-height: 800px;
    background: #ABABAB;
    flex: 2 1 70%;
    margin: 3px;
    padding: 3px;
}
.wrap footer  {
    background: #707070;
    min-height: 50px;
    margin: 3px;
    padding: 3px;
}
@media all and (max-width: 640px) {
    #flexContainer {
        flex-flow: column wrap;
    }
    .wrap header {
        min-height: 75px;
    }
 
    .wrap nav {
        min-height: 50px;
        order: 1;
    }
    .wrap aside {
        min-height: 50px;
        order: 2;
    }       
    #content {
        min-height: 725px;
        order: 3;
    }
    .wrap footer {
        min-height: 25px;
    }
}
<div class="wrap">
    <header>header</header>
    <section id="flexContainer">    
        <nav>navigation</nav>
        <section id="content">section</section>
        <aside>aside</aside>
    </section>
    <footer>footer</footer> 
</div>

全屏浏览器（1920px）下展示的效果：

浏览器的大小拖放到640像素以下的展示效果如下：