flex布局的优缺点(什么情况下用flex布局？)

flex布局就是弹性布局用比较专业的话来说就是一种弹性布局方案,通过flex布局,大家可以非常快速并且完美地完成页面的布局操作,flex布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

一、什么是flex布局?

flex布局就是弹性布局，页面中任何一个元素只要设置了display:flex属性，那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。

二、flex布局的优缺点是：

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

2、弹性布局在网页中实现快速分配比例，盒子快速对齐优势很大，因为通过简单的几个属性就可以实现，进而减少我们设置具体值。但是弹性布局中的属性对于浏览器版本要求比较严格，如果浏览器版本太低那么弹性布局中的属性是无法正常使用的。

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

4、注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

三、什么情况下用flex布局?

1、以携程移动页面为例，在网页中当遇到需要将父元素按照奇数进行等分，比如携程中红色区域是将父元素3等分。如果用流式布局那么就需要设置33。33%。如果用flex布局只需要给每一个子元素设置一个属性flex:1即可快速实现。

2、以淘宝网页为例，当我们需要页面中多个子元素快速实现在父元素中以左右距离适中显示的时候，这个时候我们不需要设置任何的px值，只需要给元素设置

justify-content:space-around就可以实现。

3、以携程为例，当页面中出现子元素按照其他比例分割父元素的时候，依然可以通过弹性盒子中的flex实现快速实现。如图:红色区域是按照 2:1:2 和 2:1:1:1的比例显示。

如果咱们在写移动端页面(包括PC端页面)遇到以上几种情况的时候，flex布局是最好的选择。