flex: 1 是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，具体来说：
flex: 1;
/* 等同于 */
flex: 1 1 0%;
/* 即 */
flex-grow: 1; /* 增长系数 */
flex-shrink: 1; /* 收缩系数 */
flex-basis: 0%; /* 基准值 */
flex-grow: 1
-
定义项目的放大比例
-
默认值为0（即如果存在剩余空间，也不放大）
-
当所有项目的 flex-grow 为1时，它们将等分剩余空间
-
如果一个项目的 flex-grow 为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
flex-shrink: 1
-
定义项目的缩小比例
-
默认值为1（即如果空间不足，该项目将缩小）
-
如果所有项目的 flex-shrink 为1，当空间不足时，都将等比例缩小
-
如果一个项目的 flex-shrink 为0，其他项目都为1，则空间不足时，前者不缩小
flex-basis: 0%
-
定义了项目在分配多余空间之前的初始大小
-
默认值为
auto（即项目的本来大小） -
设为
0%意味着项目的初始大小会被忽略
常见使用场景：
/* 场景1：等分布局 */
.container {
display: flex;
}
.item {
flex: 1; /* 所有项目等分容器空间 */
}
/* 场景2：左固定右自适应 */
.container {
display: flex;
}
.left {
width: 200px; /* 固定宽度 */
}
.right {
flex: 1; /* 占据剩余所有空间 */
}
/* 场景3：中间自适应，两边固定 */
.container {
display: flex;
}
.left {
width: 200px;
}
.middle {
flex: 1; /* 占据中间所有空间 */
}
.right {
width: 200px;
}
需要注意的点:
-
flex: 1会使元素成为弹性项目，可以自动扩展填充可用空间 -
当多个元素都设置
flex: 1时，它们会平均分配可用空间 -
flex: 1常用于实现自适应布局和等分布局 -
使用
flex: 1时，元素的初始尺寸会被忽略，完全根据弹性容器的可用空间来计算
