flex-basis设置子元素初始尺寸，flex-grow定义剩余空间分配比例。例如容器500px，两元素分别设flex-basis:200px和100px，总需300px，剩200px按flex-grow 1:2分配，最终A得约266.67px，B得约233.33px。推荐使用flex简写如flex:1或flex:1 1 200px，提升代码清晰度与可维护性。
在CSS Flex布局中，控制子元素的大小主要依靠 flex-basis、flex-grow 和 flex-shrink 三个属性。本文重点讲解 flex-basis 与 flex-grow 的结合使用，帮助你精准控制Flex子元素的初始尺寸与扩展行为。
flex-basis：设置子元素的初始主轴尺寸
flex-basis 决定了子元素在分配多余空间前的“初始大小”。它可以是一个长度值（如 100px、20%）或关键字（如 auto、content）。
- 当设为 100px，元素初始宽度为100px（在横轴排列时）
- 设为 auto 时，元素大小基于内容或自身的 width 属性
- 设为 0 时，忽略内容大小，完全由 flex-grow 分配空间
flex-grow：定义子元素如何扩展以填充剩余空间
flex-grow 控制子元素的“伸缩比例”。默认值是 0，表示不扩展。若设置为大于0的数值，元素将按比例占据容器中未被占用的空间。
- 两个子元素分别设置 flex-grow: 1 和 flex-grow: 1，则平分剩余空间
- 若一个为 1，另一个为 2，后者将获得两倍于前者的新空间
- 只有在 flex-basis 留出可分配空间后，flex-grow 才起作用
flex-basis 与 flex-grow 的协作示例
考虑以下HTML结构：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <div class="item item1">A</div> <div class="item item2">B</div> </div>
CSS 示例：
.container {
display: flex;
width: 500px;
}
.item1 {
flex-basis: 200px;
flex-grow: 1;
background: #ffcccc;
}
.item2 {
flex-basis: 100px;
flex-grow: 2;
background: #cceeff;
}
解析过程：
- 总初始需求：200px + 100px = 300px
- 剩余空间：500px - 300px = 200px
- 按 flex-grow 比例 1:2 分配，即 A 得 66.67px，B 得 133.33px
- 最终大小：A ≈ 266.67px，B ≈ 233.33px
常用简写形式：flex
实际开发中，通常使用 flex 简写属性来同时设置这三个值：
- flex: 1 等价于 flex: 1 1 0%（常见于等分布局）
- flex: 0 1 auto 是大多数元素的默认行为
- flex: 1 1 200px 表示初始200px，可伸缩，按比例1分配空间
推荐使用 flex 简写，更清晰且减少代码量。
基本上就这些。掌握 flex-basis 与 flex-grow 的配合逻辑，就能灵活控制Flex项目在不同场景下的尺寸表现，无论是固定起点还是弹性扩展都能轻松应对。
