flex属性详解0，1，auto分别什么意思

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;