而弹性布局也是随着CSS3而推出的，那大家该如何灵活运用弹性布局呢？弹性布局较传统布局方式有哪些优势呢？
传统盒状模型布局的弊端
截至当前，依旧有很多网站是基于盒状模型来布局的，主要依懒display属性 + position属性 + float属性来精确定位元素。虽然这种布局方式可以精确定位元素，但它依旧有很多弊端，比如：
浏览器兼容性问题较多；
特殊布局（如垂直居中）较难实现，有时宽度计算不准确；
过多的position会影响浏览器渲染性能等。
弹性布局如何使用？
弹性布局也就是Flex布局，通过Flex布局可以很简单的实现各种页面布局，而且它是响应式的，当前主流的浏览器都支持弹性布局。
弹性布局该如何来使用呢？掌握以下技术可以快速掌握弹性布局。
1、父级元素设置
弹性布局只需要对父元素和子元素进行很少的设置即可，父级元素设置display:flex就能开启弹性布局。开启弹性布局后，子级元素的排列方式、对齐方式也要在父级元素上设置，具体如下：
flex-direction：定义子级元素的排列方式；
flex-wrap：定义子级元素是否在一行显示（要不要换行）；
justify-content：定义子元素水平排列方式；
align-items 与 align-content：定义子级元素垂直排列方式。
2、子级元素的设置
子级元素可用属性不多，一般只有两个：
box-sizing：设置子级元素的盒模型
flex：设置子级元素的宽度系数。
