flex 布局容器的属性记录

flex布局有两种方式，行内和块级

块级：disaply：flex
行内：disaply：inline-flex

如果父元素设置了 flex属性，那么子元素的float、clear、vertical-align的属性都将失效

有六种属性可以配合flex布局使用

1.flex-direction
2.flex-wrap
3.flex-flow
4.justify-content
5.align-items
6.align-content

第一：flex-direction 决定了主轴的方向

flex-direction: row | row-reverse | column | column-reverse;

row决定主轴方向是水平，起点在左端
row-reserve 主轴是水平，起点在右端
column主轴是垂直方向，起点在上沿
column-reserve主轴是垂直方向，起点在下沿

第二：flex-wrap 决定容器内的项目是否可以换行
flex-wrap的默认属性是nowrap 不换行，当空间不足时，项目尺寸会随之调整，不会挤到下一行
wrap属性会换行
wrap-reserve属性会换行，第一行在下方

第三：justify-content定义了项目在主轴的对齐方式

 justify-content: flex-start | flex-end | center | space-between | space-around;

 使用这个属性的前提是要有 flex-direction：row 才可以，就是在一行

默认值是：flex-start 左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目间的间隔相等，既剩余空间被分成间隙
space-round：每个项目的两侧相等，项目之间的间隔是项目边缘的两倍

第四：align-items定义了项目在交叉轴上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch;

使用这个属性的前提是要有 flex-direction：row 才可以，就是在一行

默认值是stretch，即如果项目未设置高度或者设为auto，将占满整个容器的高度
假设容器高度设置为 100px，而项目都没有设置高度的情况下，则项目的高度也为 100px
flex-start：交叉轴的起点对齐
假设容器高度设置为 100px，项目是20px，40px，这时候会根据起点对齐，长短不一
flex-end：交叉轴的终点对齐，和flex-start相反
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐，以文字的底部为主

5.align-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，那么属性将不起作用。

通俗的将：就是设置了flex-wrap：nowrap (不换行)属性，项目就只有一条轴线
建立在主轴为水平方向时测试，即 flex-direction: row, flex-wrap: wrap

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

默认值是：stretch，会平分容器的垂直方向的空间，如果项目没有设置高度的话，每一行都会特别挨着
flex-start：轴线全部在交叉轴的起点对齐
flex-end：轴线全部在交叉轴的终点对齐
center：轴线全部在交叉轴的中间对齐
space-between：轴线在两端对齐，之间的间隔相等，即剩余空间被等分成间隙
space-around：每个轴线的两侧相等，所以轴线之间的间隔比边缘大一 倍