Flex弹性布局简介、普通布局与弹性布局实现居中对比、弹性布局优缺点。

Flex弹性布局简介

Flexible Box 简称Flex，是一种比较灵活高效的网页布局方式。

Flex弹性可以应用于任意的HTML元素，行内元素与块级元素使用弹性布局的方式不一样，如下代码段所示。

//块级元素应用


.flexibleBlock {
    display: flex;
}

//行内元素应用


.flexibleInline {
    display: inline-flex;
}

  而一旦元素被应用上了弹性布局，则该元素会变成Flex container(容器)，而其子元素都会变成Flex容器的items(子项)。Flex容器以及子项都可以增加一些布局属性来调整Flex容器内部的子项的布局。

  对于Flex容器来说，其布局时应用到两条基准轴：主轴(mian axis) 和 与主轴垂直的交叉轴(cross axis) 。主轴即可以是水平的，也可以是垂直的，而交叉轴始终垂直于主轴。

 在了解了弹性盒模型的基本概念后，我们就可以着手了解如何控制Flex容器内部的布局了。总结：通过设置Flex容器以及Flex子项的布局属性来调整Flex容器内部布局。

Flex容器属性：主要控制沿着主轴与交叉轴上的item布局。

1. flex-direction:  控制主轴方向以及主轴方向上的元素从头排列到尾，还是从尾排列到头（row、column、row-reverse、colunm-reverse）
2. flex-wrap: 控制是否换行，以及换行后各行的排列顺序。（nowrap、wrap、wrap-reverse）
3. flex-flow: 包含flex-direction以及flex-wrap两个属性，第一个属性为flex-direction
4. justify-content: 控制items在主轴方向上的对齐方式。
5. align-items:控制items在交叉轴上的对齐方式。
6. align-content:控制items在多条轴线的情况下的对齐方式。

下面代码段展示了justify-content、align-items、align-content多个属性值的作用。

.flexible-block {
    display: flex;
    flex-flow: row wrap;
    justify-content: center; //在主轴方向居中向两边排列
    /*justify-content: flex-start; 从主轴正方向排列，正方向受flex-direction影响*/
    /*justify-content: flex-end; 从主轴反方向排列*/
    /*justify-content: space-between; 从主轴两端开始向中间排列，且item间隔一致*/
    /*justify-content: space-around; 从主轴留白开始向中间排列，且item间隔与留白一致*/

    align-items: center; //交叉轴的中点对齐
    /*align-items: flex-start; 从交叉轴正方向对齐，正方向受flex-direction影响*/
    /*align-items: flex-end; 从交叉轴反方向对齐*/
    /*align-items: stretch; 交叉轴方向上拉伸对齐*/
    /*align-items: baseline; item的第一行文字的基线对齐*/

    align-content: center; //与交叉轴的中点对齐
    /*align-content: flex-start; 与交叉轴的起点对齐*/
    /*align-content: flex-end; 与交叉轴的终点对齐*/
    /*align-content: stretch; 轴线占满整个交叉轴*/
    /*align-content: space-between; 与交叉轴两端对齐，轴线之间的间隔平均分布*/
    /*align-content: space-around; 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍*/
}

Flex item 属性：给每个item定义自身的排列顺序、交叉轴上的对齐方式、以及空间剩余或者不足时候的自适应。可以设置以下属性

1. order： 主轴上的item排列顺序，整形数字，较小的排前面。
2. flex-grow：number型，默认值为0，与其他item按属性值的比例，分配剩下的主轴空间。为0时不分配。
3. flex-shrink：number型，默认值为1，与其他item按属性值的比例，缩小自身以适应主轴空间。为0时不缩小。
4. flex-basis：输入值类型与width一致。表示item固定占用多少主轴方向上的空间。
5. flex: flex-grow flex-shrink flex-basis; 默认值为 0 1 auto，当flex为auto则值为 1 1 auto， none则值为0 0 auto.
6. align-self: 可以设置自身独立于交叉轴的对齐方式，输入值与align-items一致

 

普通布局与弹性布局实现居中对比

  下面代码段分别是flex弹性布局和普通布局中的元素居中实现。在对d1和d2进行居中布局的时候，可以看出flex弹性布局更加灵活，而且代码更加简洁，实现灵活，不用额外增加影响其他元素的属性甚至新增元素来作为定位用。

  而普通布局中有很多种实现居中的策略，题主中的这种算是比较简洁的，然而，这种情况下，仍然需要给父级div增加position为relative的属性，以便于子元素的绝对定位。同时还需要将d1和d2用一个新的div元素包裹起来，破坏了html的架构和可读性。

//flex弹性布局 元素居中

    
d1
    
d2


.flexible-block {
    display: flex;
    flex-flow: row wrap;
    justify-content: center; //在主轴方向居中向两边排列
    align-items: center; //交叉轴的中点对齐
    align-content: center; //与交叉轴的中点对齐
}

//普通布局 元素居中

    

        
d1
        
d2
    


.relative-div {
    position: relative;
}

.normal-layout-center-align {
    position: absolute;
    top: 50%;
    bottom: 50%;
    tranform: translate(-50%, -50%);
}

弹性布局优缺点

优点：布局灵活，代码简洁，实现复杂布局和自适应布局时比较高效，而且以后代码的可维护性也比较强。

缺点：以往很多人说兼容性不好，但是现如今IE10以下的浏览器市场占有率越来越低，兼容性这块已经不用担忧了。浏览器支持列表如下。偏要说一个缺点，应该就是前端又得学习一个新的布局方式了吧，: ) 。