Flex问题汇总*

一、flex是哪几个属性的简写？

1. flex属性是 flex-grow + flex-shrink + flex-basis 的缩写
2. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 ```css .item {flex: 1;} //等价于 .item {flex-grow: 1;flex-shrink: 1;flex-basis: 0%;}

.item {flex: auto;} //等价于 .item {flex-grow: 1;flex-shrink: 1;flex-basis: auto;}

.item {flex: none;} //等价于 .item {flex-grow: 0;flex-shrink: 0;flex-basis: auto;}

<a name="iFj4V"></a>
## 二、flex实现水平垂直居中
```css
/*转为flex弹性盒布局*/
display: flex;
/*主轴上的对齐方式为居中*/
justify-content: center;
/*交叉轴上对齐方式为居中*/
align-items: center;