1. 弹性盒子 display: flex;
给父元素设置 display：flex 后，该元素称为弹性容器，它的所有子元素自动成为容器成员，
称为弹性项目，弹性项目会随着弹性容器的变化自动调整宽高。
关于弹性容器：大部分属性设置都要写在弹性容器上，这些属性会影响项目的排列
关于弹性项目：当容器的宽高不足以容纳所有项目时，弹性项目会自动压缩宽高以适应
容器，压缩后的项目实际宽高=项目设定宽高/所有项目总宽高*容器宽高;
弹性容器的几个属性：
1. flex-direction;:设置弹性项目的排列主方向，默认从
左向右排列(row)，
row:默认值，从左到右
row-reverse：从右到左
column: 从上到下
column-reverse：从下到上
2. justify-content:; 设置弹性项目在主方向上的对齐方式,也可分配主方向上的剩余空间
center 居中对齐
end: 主方向的结束位置对齐
flex-start: 主方向的开始位置对齐
space-evenly: 所有的项目之间以及左右两边均分主方向上的剩余宽度
space-around：将主方向上剩余的宽度平均分给每个项目的左右两边
space-between: 项目两端对齐，中间平均分配剩余宽度
3. align-items:; 设置侧方向上的对齐
stretch:默认值，项目在侧方向上没有设置尺寸时，会自动把侧方向空间占满
flex-start：侧方向开始位置对齐
flex-end：侧方向结束位置对齐
center: 侧方向上居中对齐
4. flex-wrap: ; 控制元素是否自动换行,wrap 为自动 nowrap 为不自动，换行后两行均分
容器宽或高
5. flex-flow:; 设置元素的主方向及换行方式，复合了两个属性。
flex-flow: column wrap;
6. align-content:; 分配侧方向上剩余空间，取值参考 justify-content:;
以上属性设置给容器，以下属性设置给项目
7.flex-grow:;设置项目获取宽高份数，取值为 n 分到 n 份，取值为 0 不获取
当某容器内所有项目该值之合为 10 时，该容器剩余宽高就会被划分为 10 份，若
某一个项目该值为 2，则该项目会在原有宽高基础上增加两份的值，该属性多用于均分宽高，
需要注意的是，如果项目没有做其他设置，项目中的内容(如文本)会固定占据一部分宽高不
参与划分与重分配。
8.flex-basis:数值 px:设置元素在分配剩余空间之前的在主方向上固定占有的空间，默认
为 1，若该值为 0 则可以配合上一属性完全均分宽高，不过需要注意的是，虽然固定宽高后
中文文本超过该值会自动换行，但长条数字(例如十几个 1)和英文仍会将元素的大小撑开，
这似乎是由于网页将连续的数字或字母作为一个整体数值(int)或字符(char)进行显示，而不
是字符串(string).
