1、css3弹性盒子
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
2、弹性盒子属性值
display:flex或inline-flex
justify-content（主轴方向的对齐方式）
- flex-start默认值 左对齐。
- flex-end 右对齐。
- center 居中。
- space-between 每两个项目之间间距相等。
- space-around 每个项目两侧距离相等。
- space-evenly 每个项目之间的间距相等。
align-items（交叉轴对齐方式）
- stretch默认值。项目被拉伸以适应容器。
- center 项目位于容器的中心。
- flex-start 项目位于容器的开头。
- flex-end 项目位于容器的结尾。
- baseline 项目位于容器的基线上。
flex-direction（修改主轴方向）
- row默认值。元素将水平显示，正如一个行一样。
- row-reverse 与 row 相同，但是以相反的顺序。
- column 元素将垂直显示，正如一个列一样。
- column-reverse 与 column 相同，但是以相反的顺序。
flex-wrap（换行）
nowrap 默认值。规定元素不拆行或不拆列。 wrap 规定元素在必要的时候拆行或拆列。 wrap-reverse 规定元素在必要的时候拆行或拆列，但是以相反的顺序。
换行之后 align-content
- flex-start默认值 项目起点与交叉轴起点对齐。
- flex-end 项目起点与交叉轴终点对齐。
- center 项目起点与交叉轴中点对齐。
- space-between 每两行间距相等。
- space-around 每一行两侧距离相等。
- space-evenly 每个项目之间的间距相等。