flex: 1 是什么意思？

flex: 1 的组成：

• flex-grow（放大比例，默认为0）
• flex-shrink（缩小比例，默认为1）
• flex-basic（flex 元素的内容盒（content-box）的尺寸，默认auto）的缩写；

flex 的第三项指的是 flex-basis 这个属性，这个属性的 0 和 auto 在大多数情况下都会有所不同：

数值被解释为特定宽度，因此 0 将与指定 width: 0 相同； 0% 就相当于容器内所有项目原本的 width 不起作用，然后平分宽度； auto 就相当于容器内所有项目原本的width 起作用，伸缩空间减去这些 width，剩余空间再平分。所以有的情况下 auto 和 0% 是相同的 2 种，flex-basis 为 0%，覆盖 width，实际占用 0， flex-basis 为 auto，width 权限更高，占用 width 的值。

所以在下面的情况下

.content {
  display: flex;
}
.content1{
  flex:1
}
<div class="content">
    <div class="content1">1</div>
    <div class="content1">2</div>
    <div class="content1">3</div>
</div>

flex: 1 等价于：

{
    flex-grow: 1;
    flex-shrink : 1; 
    flex-basis: 0%;
}