一. 弹性盒模型的理解
其实就是比较多灵活的属性去控制布局，父容器必须是 flex
二. 弹性盒模型学习的意义
目前流行的web技术布局形式基本都采用的是类似弹性盒模型的属性
三. 常用属性
弹性盒模型可以分为两种*容器属性 和 *子元素属性
3.1容器属性
/*
row 默认子元素水平靠左排列
row-reverse 子元素靠右倒序排列
column 竖排
column-reverse 倒序竖排
*/
1、flex-direction:row; （确定子元素排列的方向）
/*
nowrap:默认值，子元素宽度超过父级宽度时不换行;
wrap:子元素宽度超过父级宽度时换行;
wrap-reverse:子元素宽度超过父级宽度时换行且倒序排列;
*/
2、flex-wrap:wrap-reverse;（元素超过父容器尺寸时是否换行）
/*
flex-start:整体子元素靠左;
flex-end:整体子元素靠右;
center：整体子元素居中；
space-between:第一个子元素靠左顶格，最后一个子元素靠顶格，中间的元素等分间距;
space-around:第一个子元素靠左的间距和最后一个子元素靠右的间距是中间子元素间距的一半，中间的元素等分间距。
*/
3、justify-content:space-around;（子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的分布方式）
/*
flex-start:整体垂直靠上排列;
flex-end:整体垂直靠下排列;
center：整体垂直居中排列;
baseline: 子元素内的文字底部对齐，如果文字大小不同，会导致子元素水平不对齐;
stretch:如果子元素不设置高度，高度被拉伸到和父元素高度相同（除去自身的margin）;
*/
4、align-items:stretch;（子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的垂直方向的分布方式）
/* flex-start:多行整体靠上排列;
flex-end:多行整体靠下排列;
center:多行整体垂直居中排列;
space-between:第一行子元素靠上顶格，最后一行子元素靠下顶格，中间行元素等分垂直的间距;
space-around:第一行子元素靠上的间距和最后一行子元素靠下的间距是中间行元素间距的一半，中间行的元素等分垂直间距。
*/
5、align-content:space-around;（设置多行子元素在行方向上的对齐方式）
3.2子元素属性
/*
表示的是当父元素有多余的空间时，这些空间在不同子元素之间的分配比例（安卓里的权重）
*/