display弹性盒子布局

在flexBox弹性布局出来之前，前端主要是用display+position（定位）+float(浮动)来实现布局的，在flexBox出来之后我们可以用disPlay:flex+position实现布局，更灵活易容。

display:flex（inline-flex）（设置为块级弹性或行内级弹性），这是css3新增的布局方式，是一种全新的布局方式。

flex的布局思想是：流式的弹性盒子布局（之前的只是盒子布局）；

注意：这是css3的新增属性，除了之前浮动的一些属性失效了，其他原来的属性都是正常的

要理解其两个部分：容器的属性和项目的属性。

容器属性：

disPlay:是否为伸缩容器【display:flex(块级伸缩)  display:inline-flex(行内级伸缩)】；

flex-direction:主轴方向【】；flex-wrap:是否换行【】；

flex-flow=flex-direction+flex-wrap,：同时设置主轴方向和是否换行

justify-content:主轴对齐方式【】；

align-items:交叉轴对齐方式【】；

align-content:换行后交叉轴对齐方式【】；

align-self:在是可变容器的前提下，这是某一个容器的在交叉轴的对其方式；

align-text:设置文本标签的文本对齐方式【】；

flex-grow:伸缩项目的放大比例（这是item的属性）【默认值是0即使有剩余空间也不放大；如果都设置为1，则平分空间；如果其中一个为2，则其他不变这个占满剩余空间】

flex-basis:设置项目在主轴的空间，默认是值auto, 和直接设置width一样

项目属性：order:设置排列顺序【】；

下面是一些注意事项：

1、有文本时一定要放到文本标签中，这样可以更好的设置文本的一些属性

2、margin:auto; 会让盒子在主轴自动居中

3、