CSS Flex 问题汇总

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

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

.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;}  

二、flex实现水平垂直居中

/*转为flex弹性盒布局*/
display: flex;
/*主轴上的对齐方式为居中*/
justify-content: center;
/*交叉轴上对齐方式为居中*/
align-items: center;