弹性盒布局

Flex：使用Flex布局之后；浮动就失效了，定位仍然可用

设置主轴方向：

flex-direction:row(默认 设置主轴方向从左到右 不换行)

flex-wrap：nowrap（默认不换行从左到右）

flex-wrap：wrap（换行）

flex-direction：row-reverse（顺序颠倒）

flex-direction：column（设置主轴从上到下）

flex-wrap：wrap：wrap-reverse（上下行颠倒）

复合属性（flex-flow：row wrap-reverse）

justify-content（元素在主轴上居中排列）

justify-content : center;（居中对齐）

justify-content : flex-start;（默认，左对齐）

justify-content : flex-end;（右对齐）

justify-content : space-between;（靠边对齐）

justify-content : space-around;（子元素左右的距离保持一样）

justify-content : space-evenly（子元素左右相邻距离保持一致）

flex布局不像绝对定位，脱离文档流，flex布局设置之后还会遵守文档流

定义在交叉轴上的对齐方式

align-items：center（垂直方向居中）

align-items：flex-start（垂直方向的顶部，交叉轴的起点对齐）

align-items：flex-end（垂直方向的底部，终点对齐）

align-items：baseline（项目的第一行文字基线对齐，垂直方向按照子元素所在位置进行对齐）

align-items：stretch（默认值，如果顶部未设置高度或设为auto，讲占满容器）