弹性布局（display:flex）

1.什么是弹性布局？

在页面中任何一个元素只要设置了display:flex属性，那么当前盒子都称为弹性盒子。

弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。

 

2. 弹性布局的优缺点：

优点：其容易上手，根据flex规则很容易达到某个布局效果。

缺点：浏览器兼容性比较差，只能兼容到ie9及以上。

3.需要注意的是：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。