flex-basis结合百分比可实现响应式布局，其值相对于父容器主轴尺寸计算，常与flex-grow和flex-shrink配合使用；通过设置flex: 0 0 百分比可精确控制元素尺寸，实现等分布局，并在不同屏幕下结合媒体查询调整列数。
在使用 CSS Flexbox 布局时，flex-basis 决定了 flex 项目在主轴方向上的初始尺寸。当你将 flex-basis 与百分比结合使用时，可以实现响应式且灵活的布局结构。理解其工作原理和配合方式，有助于更精准地控制元素尺寸。
flex-basis 与百分比的基本概念
flex-basis 属性定义了 flex 项目在分配多余空间之前的初始大小。它的值可以是长度（如 px、em）或百分比（%）。当使用百分比时，该值是相对于父容器主轴方向的总尺寸计算的。
例如：
flex-basis: 50%; /* 项目初始宽度为主容器宽度的50% */这在创建等宽或按比例分布的布局时非常实用。
立即学习“前端免费学习笔记（深入）”；
与 flex-grow 和 flex-shrink 的协同作用
实际尺寸还受 flex-grow 和 flex-shrink 影响。即使设置了 flex-basis: 33.3%，如果 flex-grow 不为 0，项目仍可能拉伸以填充剩余空间。
常见写法：
.item {
flex: 0 0 25%; /* 不增长、不收缩、基础宽度25% */
}
这种写法常用于栅格系统，确保每个项目始终占据容器的 1/4 宽度，不受内容影响。
实现等分布局的实用技巧
想让多个项目平分容器宽度，可以这样设置：
- 父容器：display: flex
- 子项目：flex: 0 0 20% （5个项）或 flex-basis: 20%
若使用 flex: 1，每个项目会根据内容和可用空间重新分配，无法保证严格按百分比。因此要禁用增长和收缩才能精确控制。
响应式布局中的应用
结合媒体查询，可动态调整 flex-basis 百分比，实现不同屏幕下的列数变化：
@media (min-width: 768px) {.item { flex-basis: 50%; }
}
@media (min-width: 1024px) {
.item { flex-basis: 25%; }
}
这样在平板上两列，桌面端四列，无需额外的网格框架。
基本上就这些。关键是理解 flex-basis 设定的是“起点”，而最终尺寸由整个 flex 行为共同决定。关闭 grow 和 shrink 才能让百分比真正“固定”。
