flex: 1 是 Flexbox 布局中的一个非常常用的属性，它用于 让一个元素在容器中占据剩余的空间。具体来说，flex: 1 是 flex-grow, flex-shrink, 和 flex-basis 的简写。
解释 flex: 1 的含义：
flex-grow: 1：元素将会扩展以占据容器中剩余的空间。如果有多个元素设置了flex-grow: 1，它们会均分剩余空间。flex-shrink: 1：当容器空间不足时，元素会收缩。如果设置为 1，元素会按比例缩小。flex-basis: 0：默认情况下，flex-basis决定了元素的初始大小。flex: 1将其设置为0，意味着元素的大小会基于剩余空间进行计算，而不是基于其内容的自然宽度。
举个例子：
假设你有三个 div，并且希望中间的 div 填充容器中的剩余空间，你可以给它设置 flex: 1。
示例代码：
<div class="container"><div class="left">左侧</div><div class="center">居中内容</div><div class="right">右侧</div>
</div>
.container {display: flex;justify-content: space-between; /* 让左右两个 div 靠两边 */align-items: center; /* 垂直居中 */height: 100px;
}.center {flex: 1; /* 中间的 div 填充剩余空间 */text-align: center; /* 内容居中 */
}.left, .right {width: 100px; /* 固定宽度 */background-color: lightgray;
}
解释：
.center的flex: 1：中间的div会占据容器中 剩余的空间，确保它扩展以填充两侧的空隙。.left和.right：这些div的宽度是固定的（100px），它们不会改变大小。justify-content: space-between：左右两个div会自动分布到容器的两端。
效果：
left和right会保持固定宽度，而center会填充剩余空间，并且内容在其中居中。
其他用法：
flex: 0：元素不会扩展，也不会收缩，保持它的初始大小。flex: 2：如果一个元素的flex设置为2，而其他元素的flex为1，那么该元素会占据剩余空间的 两倍。
总结：
flex: 1 让元素在 flex容器 中占据剩余的空间，并且使该元素能够根据容器大小的变化进行自动扩展或收缩。