flex CSS 属性设置的是， flex 元素如何根据其在 flex 容器中的所剩空间来动态拉伸或收缩，它是 flex-grow 、 flex-shrink 、 flex-basis 这三个属性的简化版。其 语法格式 有 单值、双值、三值 三种语法格式。
1.当flex取值为none时，则计算值为0 0 auto，如下两种写法是等同的
.item {
flex: none;
}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
2.当flex取值为auto时，则计算值为1 1 auto，如下两种写法是等同的
.item {
flex: auto;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
3.当flex取一个非负数字时，为flex-grow的值，flex-shrink取1，flex-basis取0%，如下两种写法是等同的
.item {
flex: 1;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
4.当flex取一个长度或者百分比时，为flex-basis的值，flex-grow取1，flex-shrink取1，如下两种写法是等同的
.item {
flex: 0%;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item {
flex: 100px;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}
5.当flex取值为两个非负数字时，则分别为flex-grow、flex-shrink的值，flex-basis为0%。如下两种写法是等同的
.item {
flex: 1 0;
}
.item {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0%;
}
6.当flex取值为一个非负数字和长度或百分比时，分别为flex-grow、flex-basis的值，flex-shrink取1。如下两种写法是等同的
.item {
flex: 1 100px;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}
弹性盒子中 flex: 0 1 auto 表示什么意思
三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为 0 1 auto。
1.flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
2.flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
3.flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
flex-basis这个属性设置的是一个 flex 元素的初始大小 。它可以用以下几种值填充：
1.宽度
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto; //默认值
2.内置调节大小的关键字
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
3.根据内容自动调节大小
flex-basis: content;
4.全局值
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
