这几年前端技术发展较快，谈到前端就离不开页面布局。网页布局大概经历了这几个阶段：最早期的Table表格布局 => 传统的盒状模型布局 => 再到现在的Flex弹性布局。

而弹性布局也是随着CSS3而推出的，那我们该如何灵活运用弹性布局呢？弹性布局较传统布局方式有哪些优势呢？

传统盒状模型布局的弊端

截至当前，依旧有很多网站是基于盒状模型来布局的，主要依懒display属性 + position属性 + float属性来精确定位元素。虽然这种布局方式可以精确定位元素，但它依旧有很多弊端，比如：

• 浏览器兼容性问题较多；
  

• 特殊布局（如垂直居中）较难实现，有时宽度计算不准确；

• 过多的position会影响浏览器渲染性能等。

弹性布局如何使用？

弹性布局也就是Flex布局，通过Flex布局可以很简单的实现各种页面布局，而且它是响应式的，当前主流的浏览器都支持弹性布局。

弹性布局该如何来使用呢？掌握以下技术可以快速掌握弹性布局。

1、父级元素设置

弹性布局只需要对父元素和子元素进行很少的设置即可，父级元素设置display:flex就能开启弹性布局。开启弹性布局后，子级元素的排列方式、对齐方式也要在父级元素上设置，具体如下：

• flex-direction：定义子级元素的排列方式；
  

• flex-rap：定义子级元素是否在一行显示（要不要换行）；

• justify-content：定义子元素水平排列方式；

• align-items 与 align-content：定义子级元素垂直排列方式。

2、子级元素的设置

子级元素可用属性不多，一般只有两个：

• box-sizing：设置子级元素的盒模型
  

• flex：设置子级元素的宽度系数。