弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
一、display的用法：（设置为弹性容器）
二、flex-direction的用法：（设置主轴的方向）
1、row为默认位置
三、flex-wrap的用法：（弹性容器里的子元素怎么换行）
1、nowrap为默认值，不会溢出不会换行，子元素大小会随容器的改变而改变
2、wrap，溢出换行，从顶部开始排列
3、wrap-reverse，溢出换行，从底部开始排列（反向）
四、justify-content的用法：（设置弹性盒的子元素在主轴/横轴方向上的对齐方式）
1、justify-content：flex-start；左对齐，无边距
2、justify-content：flex-end；右对齐，无边距
3、justify-content：center；居中紧挨，无边距
4、justify-content：space-between；平均分布在行上，与弹性盒子无边距
5、justify-content：space-around；平均分布在行上，子元素与弹性盒的边距为两个子元素边距的一半
五、align-items的用法：（设置弹性盒的子元素在侧轴/纵轴上的对齐方式）
以下实例设置了子元素1,2的高度，3,4的高度没有设置，4设置了字体的大小
1、align-items：flex-start；
2、align-items：flex-end；
3、align-items：center；
4、align-items：baseline；（将文字对齐，使文字的基线在一条线上）
5、align-items：stretch；默认值，如果父元素有高度，子元素没有，则没有高度的子元素将撑满整个父元素高度
六、align-content的用法：（类似于align-items用法，都是容器在上下布局，下图说与align-content类似是错误的）
1、align-content：stretch；为默认值
2、align-content：flex-start；
3、align-content：flex-end；
4、align-content：center；
5、align-content：space-between；各行在弹性盒容器中平均分布
6、align-conten：space-around；各行在弹性盒容器平均分布，两端保留子元素和子元素之间间距的大小一半
<注>下篇：弹性盒的深刻理解2 将讲述写在子元素上的属性