flex布局（弹性布局）

在传统布局中，会遇到好多麻烦。类似要把盒子并排显示。

如下图：

我们要给盒子设置浮动。这个还是简单的。

要是我们要把盒子移动到中间，我们就要用到定位把盒子一个一个地定到所需要的地方。

这些代码量就会大起来了。

 

下面我来介绍一下flex布局，这个布局可以简化代码，用起来也特别容易。

如果子元素是块级元素，就给父元素设置display值为flex就可以了。

如果子元素是行内元素，就给父元素设置display值为inline-flex。

 

效果图：

要注意的是，设置了flex布局，在盒子里面设置float会没有效果。

    弹性布局之所以叫弹性布局，真的是因为他有弹性。元素可以根据屏幕的大小来改变自身的宽度，这是flex布局的一大特点。

在flex布局中，我们改变元素的位置可以通过改变主轴和交叉轴，从而改变元素的位置。

 

justify-content定义了主轴的对齐方式。

属性有：center居中  flex-start（默认值）左对齐  flex-end右对齐

align-items定义了交叉轴的对齐方式。

属性有：center交叉轴居中  flex-start交叉轴起点对齐  flex-end交叉轴终点对齐

例子：