弹性盒模型

flex是flexinle Box 的缩写，是弹性布局。
任何容器都可以指定flex布局：display：flex

设置了flex布局后，当前容器内子元素的float，clear，vertical-align属性将全部消失。
采用flex布局后的元素成为flex容器，它所有的子元素自动成为容器成员，称为容器项目。
容器默认存在两根轴：水平的轴（main axis）和垂直轴（竖轴/侧轴）（cross axis ）
主轴开始的位置main-start,结束的位置main-end。交叉轴开始的位置cross start，结束的位置：cross end。

弹性盒模型有以下属性重点内容
以下是给容器（父元素）加的属性：

1、display:flex;设置为弹性盒。

2、flex-direction(主轴排列方向)
说明此属性指定了子元素在父容器中的位置。
flex-decoration:row(默认值)：主轴为水平方向，默认在左端。
flex-decoration:row-reverse; 主轴为水平方向，起点在右端。
flex-decoration:column; 主轴为垂直方向，起点在上沿。
flex-decoration:column-reverse; 主轴为垂直方向，起点在下沿。

3、justify-content(主轴对齐方式)
说明：内容对齐，沿着弹性容器的主轴线（main axis）对齐。
justify-content:flex-start: 默认左对齐。
justify-content:flex-end; 左对齐。
justify-content:center]; 居中对齐。
justify-content:space-between; 两端对齐，中间自动分配。
justify-content:space-around; 自动分配距离。两边的距离是中间距离的一半。

4、align-items(交叉轴对齐方式)（在整个竖轴上垂直居中）
align-items:flex-start; 顶端对齐。
align-items:flex-end; 底对齐。
align-item:center;垂直居中对齐。
align-item:baseline;项目内文本的底线对齐。
align-item:strech; 项目的高度自适应容器（用时要删除原本设在项目(子元素)上的高度）

5、flex-wrap
说明：该属性控制flex容器为单行或者多行，同时横轴的方向，决定了新行堆叠大方向。
flex-wrap:nowrap; 不换行，flex容器为单行，该情况下，flex子元素可能溢出容器。
flex-wrap:nowrap; 换行。flex容器为多行，溢出的部分会放置到新的一行。
flex-wrap:wrap-reverse; 反转wrap排列，从下到上排列。

6、align-content(行与行之间的对齐方式 ，多行)
注意：本属性在只有一行的伸缩器没有效果。
align-content:flex-start:与交叉轴的起点对齐。
align-content:flex-end; 与交叉轴的终点对齐。
align-content:center; 与交叉轴的中点，中心线对齐。
align-content:space-between;与交叉轴两端对齐，轴线之间的间隔平均分布。
align-content:space-around; 每根轴线的两侧间隔都相等。
align-content:stretch;(默认值)：轴线占满整个交叉轴（用时要删除原本设在项目（子元素）上的高度。）

7、align-self（对于单个项目来说的，一个项目比较特殊，和其它的项目不一样）
说明：align-self 属性可以重写弹性容器的align-items 属性的。假设align-items把各个项目在垂直中间显示，其中有个项目很特别，它就想在下面显示，这时候给这个项目加align-self属性就可以了。
align-items:stretch; 元素被拉伸，以适应容器。
align-items：center; 元素位于容器的中心。
align-items；flex-start;元素位于容器的开头。
align-items：flex-end; 元素位于容器的结尾。

8、order
说明：项目的排序，order后跟的数字越大，排在后面，默认值为0。支持负数。

9、flex-grow
定义项目的放大比例，默认值为0，有剩余空间时元素会按比例进行放大。
如果所有的项目flex-grow属性值为1，项目等分剩余空间。
box01{flex-grow:1;}
box02{flex-grow:2;}
剩余空间被分成3份，box01占1份，box02占2份。

10、flex-shrink
flex-shrink定义了项目的缩小比例，默认值为1（空间不足时项目会被缩小）
flex-shrink:0; 项目不缩小。

11、flex-basis
定义了在分配多余空间之前，项目占据的主轴空间（main size），浏览器会根据flex-basis这个属性计算主轴（main axis）是否有多余的空间，它的默认值为auto，默认为项目的本身的大小。

12、flex
flex为复合属性
设置或检索弹性盒模型对象的子元素是如何分配剩余空间的。
flex属性是有flex-grow, flex-shrink,flex-basis,三部分组成的。默认值为flex:0 1 auto；但经常只是用一个，flex;1;即分配剩余空间。相同于flex-grow属性。

使用时遇到的问题

1、在使用弹性盒模型缩小后，文字不会换行，挤在一起了。

这时在缩小到一定程度时要给文字的容器一个宽度，让屏幕缩小后，显示的是这个宽度，文字就在这一行内放不下，就会自动换到下一行。

2、使用弹性盒模型，最好把初始的页面的宽度设为百分比，这样在伸缩的时候内容就不会被盖住；不要是一个具体的数值。
另外，盒子的高度设置最小高度(min-height;)这样， 放内容的盒子就会随着缩小之后内容的增多而高度增大。高度随着内容的改变而改变。