flex
主轴、垂直轴
flex-direction
flex-wrap
justify-content
设置弹性元素如何在垂直轴上进行分布
align-items定义的是弹性元素在垂直方向上的对齐方式。（设置弹性元素在当前行的位置分布）。
-
flex-start，将各个弹性元素与弹性容器垂直轴的起始边一侧对齐。
-
flex-end，将各个弹性元素与弹性容器垂直轴的结束边一侧对齐。
-
center，弹性元素的中点与所在行的垂直轴中点对齐。
-
stretch(默认值)：如果项目没有设置高度或者设置为auto，将沾满整个容器的高度。
注意：
-
如果弹性元素有外边距那么，弹性元素的外边距也会影响弹性元素在垂直轴上的分布。
-
如果想单独的修改某个弹性元素的对齐方式，可以为相应的弹性元素设置align-self属性。
self：自己
align-self：用在弹性元素上。
-
auto，默认值，对齐方式使用弹性容器的align-items的值。
-
flex-start，将各个弹性元素与弹性容器垂直轴的起始边一侧对齐。
-
flex-end，将各个弹性元素与弹性容器垂直轴的结束边一侧对齐。
-
center，弹性元素的中点与所在行的垂直轴中点对齐。
-
stretch，如果项目没有设置高度或者设置为auto，将沾满整个容器的高度。
-
设置整个弹性元素如何对齐。
align-content，将整个弹性容器看成一个整体然后进行对齐。
- flex-start：弹性元素紧靠垂直轴起始边。
- flex-end：弹性元素紧靠垂直轴结束边。
- center：将弹性元素作为一个整体，居中显示在垂直轴的中点。
- space-around，将剩下的空间除以行数，得到每行应该分到的空间，然后这个空间分成两份放在行的两边(上下)。
space-between，将第一行里的弹性元素放在垂直轴起始边，最后一行的弹性元素放在垂直轴结束边，然后余下的每一行弹性元素之间放置等量的空白。space-evenly，计算行数然后再当前的行数上+1，然后将剩下的空间分成那么多份。每一行前面放置一份空间，最后一份将放在最后一行的后面。
align-content对单行的弹性盒子模型无效（使用的时候需要有flex-wrap:wrap），即使是单行（也就是这一行的宽度足够将所有的元素显示在一行的时候，那如果需要平分垂直的距离也需要加上flex-wrap:wrap之后才能使用align-content）
align-content存在时align-items不起作用。
align-content和align-items区别在于：align-content将所有元素看成一个整体然后进行操作，align-items针对每一行的操作。
注意：
- justify-content 一行中的空间如何分配。
- align-items: center; 一行中盒子挨在一起居中。
- align-content: center; 弹性盒子作为一个整体，再垂直居中。
- align-items 没有 space-between 属性。
弹性增长因子
flex-grow，适用于弹性元素（子元素上设置），用来定义有多余的空间时是否允许弹性元素增大，以及允许增大并且有多余空间时，相对于其他的同辈的弹性元素增大的比例是多少。
它的值默认为0，可以是其他数字，可以是小数。不能是负数。
flex-grow: 0; 默认为0，为0的意思表示不允许弹性盒子增大。