弹性盒布局（flexbox）简要

css3弹性盒

弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
简单来说，平常我们在使用盒子或者容器时对盒子内的元素在进行一些操作时会感觉较为繁琐，比如我们在对盒子内的某个元素我们想要对其进行垂直居中时就需要很多行的代码才能实现，因此我们引入了弹性盒简化了这些操作。

一、弹性盒设置

我们可以对任意一个容器设定为弹性盒
div{
display:flex;
}
也可以设置成为
div{
display:inline-flex
}
设置成为弹性盒的盒子我们称为flex容器，简称‘容器’，盒子内的元素将成为其子元素，我们称为flex项目，简称‘项目’。
需要注意的是，我们设置成为flex布局后，子元素中的float、clear、vertical-align属性将会失效。

二、flex容器属性

在flex容器里面设置的属性将会对其子元素也就是项目生效，flex容器我们默认规定水平方向为其主轴，垂直方向为其侧轴（副轴）

1、设定为弹性盒之后，子元素（项目）默认在主轴上排列
2、子元素（项目）均能设置宽高等属性（针对于本来那些只占据自己内容大小的标签，不能设置宽高属性）
3、项目居中，只需要设置margin：auto；

1.flex-direction
该属性我们用来设定主轴及主轴的方向（默认为x正方向）：
flex-direction：row；//默认值，x轴横向从左到右
flex-direction：row-reverse；//将与row值相反，从右到左
flex-direction：column；//设定y轴（垂直方向）为其主轴，从上到下
flex-direction：column-reverse；//与column值相反，从下到上

2.justify-content
该属性设置项目在主轴上的排列方式：
justify-content：first-start；//项目从主轴起始位置开始排列
justify-content：first-end；//项目从主轴结束位置开始排列
justify-content：center；//项目于主轴中间对齐
justify-content：space-around；//项目间的距离进行平均分配（将容器宽度进行平均分配）
justify-content：space-between；//两端对齐，且项目间距离相等

3.flex-wrap
设置项目是否换行：
flex-wrap：nowrap；//不换行（默认）

flex-wrap：wrap；//允许换行