Flex弹性布局简介、普通布局与弹性布局实现居中对比、弹性布局优缺点。

Flex弹性布局简介

Flexible Box 简称Flex，是一种比较灵活高效的网页布局方式。

Flex弹性可以应用于任意的HTML元素，行内元素与块级元素使用弹性布局的方式不一样，如下代码段所示。

//块级元素应用
<div class="flexibleBlock"></div>

.flexibleBlock {
    display: flex;
}

//行内元素应用
<p class="flexibleInline"></p>

.flexibleInline {
    display: inline-flex;
}

  而一旦元素被应用上了弹性布局，则该元素会变成Flex container(容器)，而其子元素都会变成Flex容器的items(子项)。Flex容器以及子项都可以增加一些布局属性来调整Flex容器内部的子项的布局。

  对于Flex容器来说，其布局时应用到两条基准轴：主轴(mian axis) 和 与主轴垂直的交叉轴(cross axis) 。主轴即可以是水平的，也可以是垂直的，而交叉轴始终垂直于主轴。

 在了解了弹性盒模型的基本概念后，我们就可以着手了解如何控制Flex容器内部的布局了。总结：通过设置Flex容器以及Flex子项的布局属性来调整Flex容器内部布局。

Flex容器属性：主要控制沿着主轴与交叉轴上的item布局。

1. flex-directio