弹性盒子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（修改主轴