flex布局

flex容器:采用了flex布局的元素
flex项目:容器的所有子元素
在flex容器中默认存在两根轴，水平的主轴main axis和垂直的交叉轴(侧轴)cross axis，如果改变flex-direction，主轴和交叉轴也会随之改变
主轴的开始位置叫main start，结束位置叫main end，侧轴的开始位置叫cross start，结束位置叫cross end
项目默认沿主轴方向排列，单个项目占据的主轴空间叫做 main size ，侧轴空间叫做 cross size
设为Flex布局后，子元素的float、clear、vertical-align属性将失效

容器默认存在两根轴：水平的主轴和垂直的交叉轴。

{
flex-flow: row nowrap;
}

下面的例子都已设置主轴方向为flex-direction: row

flex-start: 从主轴起点开始排列

justify-content: flex-start
flex-end: 从主轴的终点开始排列

justify-content: flex-end
space-around: 项目的左右两边间隔相等，如果剩余空间为负或者只有一个弹性项，则该值等同于center
由于当设置为flex-start和flex-end时项目之间都是紧靠着没有空隙的，为了看出效果，之前给项目都设置了外边距，现在将外边距去掉，可以看出，第一个项目左边的空隙和最后一个项目右边的空隙是项目之间间隔的一半。

justify-content: space-around
space-between: 项目之间的间隔相等,如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start,可以很明显看出它与space-around的区别。

justify-content: space-between
center: 居中对齐

justify-content: center

居中对齐与flex-start和flex-end一样，项目与项目之间是不会留空隙的，如果需要空隙需要手动设置边距。除了justify-content，align-items的flex-start,flex-end,center也是如此。

flex-start:各行向容器的起始位置堆叠

align-content: flex-start
flex-end:各行向容器的结束位置堆叠

align-content: flex-end
center:各行两两紧靠，向容器的中间位置堆叠

align-content: center
stretch:若项目未设置高度或者高度为auto,各行伸展以占用剩余的空间（默认）
如下图已将项目高度去掉

align-content: stretch
space-between: 各行在容器中平均分布，第一行与容器上边界紧靠，最后一行与容器下边界紧靠

align-content: space-between
spece-around:各行在容器中平均分布，行与行之间的间距相等，第一行前面的空间与最后一行后面的空间是其他空间的一半（即每一行的上与下都留下一样大小的空间）

align-content: space-around

align-content与align-items的区别是：align-content是定义行与行之间如何排列，而align-items定义当容器内只有一行时，该行如何对齐。align-content设置了flex-start，flex-end，center后，行与行之间也是没有空隙的。

order:定义元素的排序，越小排序越前，默认为0，若要排在最前，直接设置为负数
flex-grow:当有多余空间时，元素的放大比例,默认为0
将第六个项目的flex-grow设为1，当有剩余空间，放大第六个项目，其他项目不变。
flex-shrink:当空间不足时，元素的缩小比例，设置为0时不会被压缩，默认为1
将第六个项目的flex-shrink设为2,其余的项目默认为1
flex-basis:项目在主轴上占据的空间（在未分配剩余空间时），默认值为auto，即项目的本来大小。该属性会覆盖原本的width属性。
flex:flex-grow flex-shrink flex-basis的简写，默认值为0 1 auto
align-self: 项目对齐方式，可覆盖align-items属性，该属性的值有flex-start,flex-end,baseline,center,baseline,stretch,auto。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
将第六个项目的align-self设置为center，其他项目不变