flex属性
1、flex-grow属性
2、flex-shrink属性
3、flex-basis属性
4、flex-wrap属性
5、flex-direction属性
6、flex-flow属性
1、flex-grow属性
一个数字，规定项目将相对于其他灵活的项目进行扩展的量。flex-grow 属性用于设置或检索弹性盒子的扩展比率。
CSS 语法
flex-grow: number | initial | inherit;
属性值
| 值 | 描述 |
|---|---|
| number | 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。 |
| initial | 设置该属性为它的默认值。请参阅 initial。设置默认值initial和number值为0效果一样 |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
2、flex-shrink属性
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和（width1）大于容器（widthcontain）的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。默认宽度的超出部分（width1-widthcontain）会根据不同元素指定的flex-shrink值占所有元素的比例进行分配，然后用自身width1减去按比例分配的那个值。
具体程序实例：具体程序实例
注意：flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩，（也即是，大家均摊超出容器需要shrink补偿的那部分）
3、flex-basis属性
flex-basis 属性用于设置或检索弹性盒伸缩基准值。
CSS语法：flex-basis:number | auto |initial |inherit;
js设置flex-basis属性值：（1）element.style.flexBasis="200px"; (2)element.style["flexBasis"]="200px";
| number | 一个长度单位或者一个百分比，规定灵活项目的初始长度。 |
| auto | 默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。 |
| initial | 设置该属性为它的默认值。请参阅 initial。 |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
4、flex-wrap属性
flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。默认值：nowrap不换行
| nowrap | 默认值。规定灵活的项目不拆行或不拆列。 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。 |
| initial | 设置该属性为它的默认值。默认值为nowrap |
| inherit | 从父元素继承该属性。 |
示例：
容器宽度是200px，每个元素的宽度是50px，有六个元素，总宽度已经大于了200px，此时使用了flex-wrap属性，可以进行换行显示。
倘若不设置换行，那么display：flex；效果如下：
显示的效果和flex-grow:0,flex-shrink:1;flex-basis:auto;等效。
5、flex-direction属性
flex-direction 属性规定灵活项目的方向。默认值是：row
CSS 语法
flex-direction: row | row-reverse | column | column-reverse | initial | inherit;
| row | 默认值。灵活的项目将水平显示，正如一个行一样。 | |
| row-reverse | 与 row 相同，但是以相反的顺序。 | |
| column | 灵活的项目将垂直显示，正如一个列一样。 | |
| column-reverse | 与 column 相同，但是以相反的顺序。 | |
| initial | 设置该属性为它的默认值。 |
实例：
重头戏来了：根据flex-direction和justify-content以及align-items进行居中定位。
演示实例：
<div class="container">
<div>A</div>
<div>B</div>
</div>（1）不设置方向display：flex，默认按文本流方向进行排列，由于子元素是两个div的块级元素，所以各占一行。
（2）设置display:flex;之后默认主轴方向是row，块级元素按照这个主轴进行布局。
设置为flex-direction：column；之后，此时主轴就是column方向。块级元素按照这个主轴进行布局。
（3）display:flex结合align-items:center;实现左侧垂直居中。align-items是以侧轴为定位参照基准；justify-content是以主轴为参考基准。这里使用了display：flex没有显示定义flex-direction,默认是flex-direction：row；那么侧轴与其垂直相交， align-items:cente的效果就显示为下：
（4） display:flex;结合justify-content:center;实现水平居中，这里使用了display：flex没有显示定义flex-direction,默认是flex-direction：row；justify-content是以主轴为参考基准。
（5）display:flex；flex-direction：column；align-items：center；试想一下：此时两个子元素A,B，的布局是什么样的？
flex-direction：column；表明此时的主轴的column反向；那么此时的侧轴方向是row。
align-items：center；是以侧轴为参考基准
（6）实现垂直水平居中
简单总结：flex-direction，主要用来创建主轴，表明主轴线方向，然后根据主轴线和侧轴线来决定使用justif-content还是align-items。
6、flex-flow属性
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
flex-direction 属性规定灵活项目的方向。
flex-wrap 属性规定灵活项目是否拆行或拆列。
CSS 语法
flex-flow: flex-direction flex-wrap | initial | inherit;
补充知识点： flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
实例：下例中flex仅仅只有一个参数，所以设置的是flex-grow的属性，flex的默认值是： 0 1 auto
#main {
display:flex;
}
#main div{
flex:1; /*这里的flex设置为1，等价于flex-grow：1*/
}CSS 语法
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| flex-grow | 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。 |
| flex-shrink | 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 |
| flex-basis | 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。 |
| auto | 与 1 1 auto 相同。即是：flex-grow:1;flex-shrink:1;flex-basis:auto; |
| none | 与 0 0 auto 相同。 |
| initial | 设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。 |
| inherit | 从父元素继承该属性。请参阅 inherit。 |