弹性盒子display:flex——justify-content主轴方向对齐方式、align-items交叉轴对齐方式、 flex-direction修改主轴方向、flex-wrap换行

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 每个项目之间的间距相等。