css flex布局(弹性布局)

flex布局

flex布局可以很快，简便，完整，响应式的实现各种页面布局，主要针对于盒模型，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效，现在很多浏览器都支持，在使用一下属性前，必须使用display:flex;属性，都是在父元素指定弹性布局，包括行内元素也会照样按照弹性布局执行，其中flex布局只对父元素下的第一层盒子产生弹性布局，如果还想向子元素下在使用弹性布局，需要在当前子元素的父元素中在使用弹性布局属性

flex-direction属性

flex-direction属性决定主轴的方向(x轴和y轴的排列方向)。

1. row：默认值，主轴为水平方向，左端起始。
2. row-reverse ：主轴为水平方向，右端起始
3. column：主轴为垂直方向，上端为起始
4. column-reverse：主轴为垂直方向，下端为起始

flex-wrap属性

默认情况下，布局会在一条线轴上，该属性可以在一条线轴上排不下时，执行如何换行，如果在使用弹性布局的时候，不指定该属性的换行或者指定该属性的默认值，也就是不换行，将会无限的在第一行上排版，元素也会被挤压。

1. nowrap：默认值，不换行
2. wrap：向下换行，第一行在上方
3. wrap-reverse：向上换行，第一行在下方

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content属性

该属性定义主轴上对齐方式，例如靠右，居中，靠左等

1. flex-start：默认值，靠左对齐
2. flex-end： 靠右对齐
3. center： 居中对齐
4. space-between：两端对齐，元素之间的间隔相等。
5. space-around： 元素两侧间隔相等，不是两端对齐

align-items属性

该属性定义元素在交叉轴(垂直)对齐方式

1. flex-start：y轴上端对齐
2. flex-end：y轴下端对齐
3. center：y轴居中对齐
4. stretch：子元素未设置高度或auto，将占满整个容器高度
5. baseline：与元素的第一行文字基线对齐

align-content属性

该属性定义线轴的对齐方式，如果元素只有一根线轴(也就是只有一排元素)，该属性不起作用。

1. flex-start：与y轴的上端对齐
2. flex-end：与y轴的下端对齐
3. center：与y轴的中点对齐
4. space-between：与y轴的两端对齐，中间的间隔平均分布
5. space-around：元素y轴上下两侧相等
6. stretch：默认值，轴线占满整个盒子

上面介绍的都是容器的属性，下面介绍的都是容器中需要的属性

order属性

该属性定义元素的排列顺序，数值越小，排列越靠前，默认值为0

flex-grow属性

该属性定义元素的放大比例，默认为0，如果元素属性都为1，则它们平均分布所有剩下的空间，如果其中一个大于其他的元素，则它占的比例大一倍，负值不起作用。

flex-shrink属性

该属性定义元素的缩小比例，默认为1，如果空间不足，就会将设置该属性的元素缩小，数值越大，缩小就会优先。

注意
目前还有两三个容器里元素的属性没介绍。