Flex柔性布局概述Flexible Box简称Flex，是一种比较灵活高效的网页布局方式。
Flex灵活性可以应用于任何HTML元素。 内联元素与块级元素使用灵活布局的方式不同，如以下代码段所示：
//块级别的元素包括divclass=' flexible block '/div.flexible block { display : flex； (//行内元素包含pclass=' flexible inline '/p.flexible inline ) display:inline-flex； }如果对元素应用了柔性布局，则该元素将成为Flex container (容器)，其子元素将成为Flex容器的items。Flex容器以及子项都可以增加一些布局属性来调整Flex容器内部的子项的布局。
对于Flex容器，布局适用于两个基准轴：主轴(mian axis) 和 与主轴垂直的交叉轴(cross axis)。 这意味着主轴可以是水平的或垂直的，并且相交轴始终垂直于主轴。
了解了柔性盒模型的基本概念后，就可以理解如何控制Flex容器内部的布局。总结：通过设置Flex容器以及Flex子项的布局属性来调整Flex容器内部布局。
Flex容器属性：主要控制沿着主轴与交叉轴上的item布局。
flex-direction:是将主轴方向和主轴方向的元素从头到尾排列，还是从头到尾排列，或者从行、列、行-反转、colunm-reverse、flex-wrap (nowrap、wrap、wrap-reverse ) flex-flow:有两个属性： flex-direction和flex-wrap，第一个属性是flex-direction Juss 对齐内容：控制有多个轴时项目的对齐方式。 以下代码部分说明了justify-content、align-items和align-content多个属性值的作用。
divclass=' flexible-block '/div.flexible-block { display : flex； flex-flow: row wrap； 内容：中心； //在主轴方向中央排列在两侧/* justify-content : flex-start； 从主轴正方向排列，正方向受flex-direction的影响*//* justify-content 3360 flex-end； 从主轴反向*//* justify-content : space-between； 从主轴两端向中央排列且item间隔为*//* justify-content 3360 space-around； 从主轴空白向中央排列，item间隔与空白一致*/align-items: center； //交叉轴的中点对齐/*align-items: flex-start； 从相交轴的正方向对齐，正方向受flex-direction的影响*//*align-items: flex-end； 从交叉轴反向*//*align-items: stretch； 向交叉轴方向延伸对准*//*align-items: baseline； item第一行文本的基线对齐* /对齐内容：中心； //与相交轴的中点对齐/*对齐内容：灵活开始； 对齐相交轴的起点(//)对齐内容：灵活结束； 对齐(/)对齐-内容：拉伸； 轴线占整个交叉轴*//*对齐内容3360空间-底部； 对齐交叉轴的两端，平均分布轴间距*//* align-content : space-around； 各轴线两侧的间隔都相等。 因此，轴线间的间隔是轴线与框线的间隔的倍*/} Flex item 属性：各item定义自身的排列顺序、交叉轴上的排列方法、以及空间有剩馀或不足时的适应性。 可以设置以下属性
order :主轴上item的排列顺序、整形数字、小列之前。 flex-grow:number型，默认值为0，按照其他item和属性值的比率分配剩馀的主轴空间。 0时不分配。 flex-shrink:number类型，默认值为1，按属性值与其他item的比率缩小自身以适应主轴空间。 0时不缩小。 flex-basis :输入值的类型与width一致。 表示item固定占用了多少主轴方向的空间。 flex:flex-grow
flex-shrink flex-basis; 默认值为 0 1 auto，当flex为auto则值为 1 1 auto， none则值为0 0 auto.align-self: 可以设置自身独立于交叉轴的对齐方式，输入值与align-items一致普通布局与弹性布局实现居中对比
下面代码段分别是flex弹性布局和普通布局中的元素居中实现。在对d1和d2进行居中布局的时候，可以看出flex弹性布局更加灵活，而且代码更加简洁，实现灵活，不用额外增加影响其他元素的属性甚至新增元素来作为定位用。
而普通布局中有很多种实现居中的策略，题主中的这种算是比较简洁的，然而，这种情况下，仍然需要给父级div增加position为relative的属性，以便于子元素的绝对定位。同时还需要将d1和d2用一个新的div元素包裹起来，破坏了html的架构和可读性。
//flex弹性布局 元素居中<div class="flexible-block"> <div>d1</div> <div>d2</div></div>.flexible-block { display: flex; flex-flow: row wrap; justify-content: center; //在主轴方向居中向两边排列 align-items: center; //交叉轴的中点对齐 align-content: center; //与交叉轴的中点对齐}//普通布局 元素居中<div class="relative-div"> <div class="normal-layout-center-align"> <div>d1</div> <div>d2</div> </div></div>.relative-div { position: relative;}.normal-layout-center-align { position: absolute; top: 50%; bottom: 50%; tranform: translate(-50%, -50%);} 弹性布局优缺点优点：布局灵活，代码简洁，实现复杂布局和自适应布局时比较高效，而且以后代码的可维护性也比较强。
缺点：以往很多人说兼容性不好，但是现如今IE10以下的浏览器市场占有率越来越低，兼容性这块已经不用担忧了。浏览器支持列表如下。偏要说一个缺点，应该就是前端又得学习一个新的布局方式了吧，: ) 。