在传统布局中，会遇到好多麻烦。类似要把盒子并排显示。
如下图：
我们要给盒子设置浮动。这个还是简单的。
要是我们要把盒子移动到中间，我们就要用到定位把盒子一个一个地定到所需要的地方。
这些代码量就会大起来了。
下面我来介绍一下flex布局，这个布局可以简化代码，用起来也特别容易。
如果子元素是块级元素，就给父元素设置display值为flex就可以了。
如果子元素是行内元素，就给父元素设置display值为inline-flex。
效果图：
要注意的是，设置了flex布局，在盒子里面设置float会没有效果。
弹性布局之所以叫弹性布局，真的是因为他有弹性。元素可以根据屏幕的大小来改变自身的宽度，这是flex布局的一大特点。
在flex布局中，我们改变元素的位置可以通过改变主轴和交叉轴，从而改变元素的位置。
justify-content定义了主轴的对齐方式。
属性有：center居中 flex-start（默认值）左对齐 flex-end右对齐
align-items定义了交叉轴的对齐方式。
属性有：center交叉轴居中 flex-start交叉轴起点对齐 flex-end交叉轴终点对齐
例子：