flex弹性布局

网页布局在前端开发中是一个很重要的点，在传统布局解决方案中，一般是基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现，当然也是可以实现的，比如说table布局或者说是使用绝对定位的方式，但是相对于下面要说到的弹性布局来说就复杂多了。

09年的时候，W3C提出了flex布局，相比于现在已经过去将近10年的时间了，使用上应该可以放心，但是如果你面对的是需要解决万恶的IE问题就需要考虑一下了，下面来看一下它目前的兼容情况

flex弹性布局

flex概念

在说用法之前先说一下具体的概念，flex全称是flexbox（Flexible Box），即弹性盒子，这一模块目的是在提供一个更加有效的的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的，即弹性的。

flex布局的主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至是循序），以最佳的方式来填充keys空间（其主旨是适应所有类型的显示设备）。

那么，什么是容器，什么又是项目。很简单，包围在外面的即容器，内部的即为项目。也就是说采用flex布局的元素就是flex容器（display：flex或inline-flex）,他的所有子元素（注意是子元素，而不包含后代节点）称为flex项目

在Flexbox布局中有水平的主轴（Main Axis）和垂直的侧轴/交叉轴（Cross Axis）两个概念：

flex弹性布局

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

flex容器属性

flex容器有以下几种属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content

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

在这里说一下row-reverse，它的效果并不是简单的右对齐，假设如下代码

<div class="box">
<div class="box-child">1</div>
<div class="box-child">2</div>
<div class="box-child">3</div>
<div class="box-child">4</div>
</div>

假设有如上布局，如果设置为

flex-direction:row

，则显示的效果为：1234从左至顺序不再多说，如果是设置为

flex-direction:row-reverse

，则会显示为4321靠右对齐的效果

flex弹性布局

垂直方向同理，以至于后续属性当中只要是涉及到reverse则是会先将其内容倒置，这种方式是为了方便一些国家阅读方式是从右向左的方式，比如中国的古文。

2.flex-wrap属性介绍 该属性定义的是，如果一条轴线排不下，如何换行 | 属性名 | 说明 | | ------------ | ------------ | | nowrap（默认值） | 不换行，项目元素会按照自身宽度的百分比进行宽度缩放。 | | wrap | 项目元素宽度不变化，单行遇剩余宽度不够则换行，第一行在上方。 | | wrap-reverse | 项目元素宽度不变化，单行遇剩余宽度不够则换行，第一行在下方。属于倒着的状态 |

flex弹性布局

形成这么个效果

3.flex-flow属性介绍 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。将上面两个属性结合在了一起，不在赘述。

4.justify-content属性 该属性定义了项目在主轴也就是水平轴上的对齐方式。 | 属性名 | 说明 | | ------------ | ------------ | | flex-start（默认值） | 左对齐 | | center | 居中对齐。 | | flex-end | 右对齐 | | space-between |两端对齐，项目之间的间隔都相等。 | | space-around |每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 | 下面两个属性的区别在于space-between首末两个元素的左侧和右侧是没有间距，而space-around两侧是有间距的，如下图所示为space-around的效果

flex弹性布局

5.align-items属性 该属性定义项目在交叉轴上如何对齐

该属性的前三个值有点类似于vertical-align效果，居顶居中居底对齐。不再多说，来看一下baseline的具体效果：

flex弹性布局

看效果我们可以看出项目1的上边框和项目2的文字顶部也就是“2”的最顶部是对齐的

6.align-content属性介绍 该属性定义了多根轴线（多行）的对齐方式。如果项目只有一根轴线，该属性不起作用。

具体效果如下图

flex弹性布局

flex项目属性

项目上的属性包含6个：order、flex-grow、flex-shrink、flex-basis、flex、align-self

1.order属性 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

<div class="box" style="display:flex">
<div class="box-child" style="order:1">1</div>
<div class="box-child" style="order:3">2</div>
<div class="box-child" style="order:2">3</div>
<div class="box-child" style="order:0">4</div>
</div>

如上方式，显示的顺序将变为4132

2.flex-grow属性 该属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。如果一个项目的flex-grow属性为1，其他项目都为0的话，那么这个项目将会把剩余空间全部占满（可用于左右两端布局，左侧固定宽度，右侧自适应）

3.flex-shrink属性 该属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。注意：负值对该属性无效

4.flex-basis属性 该属性定义了在分配多余空间之前，项目占据的主轴上的大小。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小，该属性会替换掉width属性，也就是说有了这个属性以后width属性将会失效。当主轴上没有多余的空间之后，这个值再大也不会使该项目的宽度变大。效果有点类似于max-width，即使width设置的再大也不会超过max-width的值

5.flex属性 该属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。不在赘述

6.align-self属性 该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

<style>
    .box{
        background-color: white;
        margin: 0 0 55px;
        display: flex;
        height:400px;
    }
    .box-child{
    width: 200px;
    height: 200px;
    line-height: 200px;
    vertical-align: middle;
    margin: 5px;
    background-color: #ffd200;
    font-size: 100px;
    color: white;
    text-align: center;
    align-self:flex-start;
    }
</style>
<div class="box">
<div class="box-child">1</div>
<div class="box-child" style="align-self:center">2</div>
<div class="box-child" style="align-self:flex-end">3</div>
<div class="box-child">4</div>
</div>

flex弹性布局

以上各属性我们可以通过两张图来看具体的效果

特别声明，下面示意图截取于grid.malven.co，作者@Malven Co著作权归作者所有。

flex弹性布局

flex弹性布局

flex弹性布局