flex-basis用于设置弹性子元素在主轴方向上的初始大小，可取长度、百分比或auto、content等值，常与flex-grow和flex-shrink配合使用，通过flex简写属性定义伸缩行为，如flex:1 1 200px表示初始尺寸200px且可伸缩，适用于侧边栏固定宽度、主内容区自适应等布局场景。
在 CSS 中，flex-basis 用于设置弹性子元素（flex item）在分配多余空间之前的初始大小。它决定了项目在主轴方向上的“首选尺寸”，是 Flexbox 布局中控制元素大小的重要属性之一。
flex-basis 的基本用法
flex-basis 可以接受长度值（如 px、em、rem）、百分比，或关键字 auto 和 content。它的作用类似于 width（在横轴布局中），但仅在 flex 容器中生效。
示例：
.item {
flex-basis: 200px; /* 初始宽度为 200px */
}如果容器是纵向的（flex-direction: column），则 flex-basis 控制的是高度。
立即学习“前端免费学习笔记（深入）”；
常见取值说明
- auto：默认值。项目大小基于自身的 width/height 或内容大小。
- content：根据内容决定大小，不预留固定空间（浏览器支持正在完善）。
- 具体数值：如 100px、5em、10% 等，明确指定初始尺寸。
例如：
.box1 { flex-basis: 100px; }
.box2 { flex-basis: 50%; }
.box3 { flex-basis: auto; }与 flex-grow 和 flex-shrink 的关系
flex-basis 通常和 flex-grow、flex-shrink 一起使用，它们可以合并写成 flex 简写属性。
比如：
.item {
flex: 1 1 200px; /* flex-grow, flex-shrink, flex-basis */
}这表示：项目初始大小为 200px，可放大也可缩小。
若只写 flex: 200px，则等同于 flex: 0 0 200px，即不伸缩，固定为 200px。
实际应用建议
当你希望某个 flex 项有固定的起始尺寸，再根据剩余空间进行伸缩时，明确设置 flex-basis 是最佳做法。
例如创建一个侧边栏和主内容区：
.sidebar { flex-basis: 250px; flex-grow: 0; }
.main { flex-basis: auto; flex-grow: 1; }这样侧边栏固定宽度，主区域填满剩余空间。
基本上就这些。灵活使用 flex-basis，能更精准地控制弹性布局中的元素尺寸。
