flex-basis结合百分比可精确控制Flex子元素初始尺寸并保持弹性布局。1. flex-basis设置项目在主轴上的初始大小，百分比相对于父容器计算；2. 常用flex简写如flex: 1 1 25%表示可伸缩且初始占25%，flex: 0 0 33.33%表示固定不伸缩；3. 实现等分布局时，使用flex: 1 1 20%可使子项均匀填充容器；4. 响应式中配合媒体查询调整百分比，如移动端设50%、桌面端25%，结合flex-wrap实现栅格效果。合理设置伸缩性可避免布局异常。
在CSS中实现Flex自适应布局时，flex-basis 与 百分比 结合使用可以精确控制子元素的初始尺寸，同时保持整体布局的弹性。关键在于理解 flex-basis 的作用是设置项目在主轴上的初始大小，而百分比值是相对于父容器的主轴尺寸计算的。
flex-basis 的基本作用
flex-basis 决定Flex项目在分配多余空间前的“理想宽度”。它可接受长度（如 px、em）或百分比（%）。当使用百分比时，项目宽度基于父容器的主轴尺寸。
例如：
flex-basis: 50%; /* 项目初始宽度为父容器的一半 */与 flex-grow 和 flex-shrink 搭配使用
实际开发中，通常使用简写属性 flex 来同时设置 flex-grow、flex-shrink 和 flex-basis。
立即学习“前端免费学习笔记（深入）”；
常见写法：
- flex: 1 1 25%; — 可伸缩，初始占 25%
- flex: 0 0 33.33%; — 不伸缩，固定占三分之一
- flex: 1 1 auto; — 默认行为，内容决定初始大小
当 flex-grow 大于0时，即使设置了百分比的 flex-basis，项目仍会扩展以填充剩余空间。
实现等分布局的实用技巧
要让多个项目平均占据容器宽度，结合百分比和 flex 简写非常高效。
HTML结构：
1
2
3
4
CSS样式：
.container {display: flex;
gap: 10px;
}
.item {
flex: 1 1 20%; /* 每个项至少占20%，但可伸展填满 */
}
这样即使内容不均，也能保持视觉上的均衡。若希望固定比例不伸缩：
.item {flex: 0 0 25%; /* 固定四分之一宽度，不伸缩 */
}
响应式中的灵活应用
在响应式设计中，可配合媒体查询动态调整 flex-basis 的百分比。
例如移动端每行两个，桌面端四个：
@media (max-width: 768px) {.item { flex: 0 0 50%; }
}
@media (min-width: 769px) {
.item { flex: 0 0 25%; }
}
配合 flex-wrap: wrap，即可实现类似栅格的效果。
基本上就这些。合理使用 flex-basis 与百分比，能让你的Flex布局既精准又灵活，特别适合卡片、表单、导航栏等需要自适应的场景。关键是根据需求选择是否允许伸缩（flex-grow/shrink），避免过度约束导致布局异常。
