flex-basis百分比相对于父容器主轴总尺寸（含padding），非content-box宽度；flex:0 0 25%禁用伸缩且锚定初始尺寸，比width:25%更可控；IE11需三值写法、小数精度及min-width:0兼容。
flex-basis 百分比是相对于谁计算的
它只认父容器主轴方向的总尺寸，不是 content-box 宽度，也不是 padding 内边距之后的可用宽度。比如父容器 width: 100% 且有 padding: 20px，子项写 flex-basis: 50%，结果仍是父容器整个宽度（含 padding）的 50%，不是减去 padding 后再算。这点和 width: 50% 表现一致，但后续伸缩行为完全不同。
为什么 flex: 0 0 25% 比 width: 25% 更可控
关键在“禁用伸缩”+“锚定初始尺寸”。flex: 0 0 25% 明确告诉浏览器：不放大、不缩小、起始占父容器 25% 宽度。而 width: 25% 在 flex 容器里会被 flex 引擎覆盖或干扰，尤其当其他子项设了 flex: 1 或内容长度不均时，实际宽度极易偏移。
- IE11 只认完整三值写法，
flex: 25%或flex-basis: 25%单独写大概率失效 - 百分比值在 IE11 中建议加小数点，如
flex: 0 0 24.9%，避免整除计算 bug - 若子项含图片或文本，必须加
min-width: 0，否则 IE11 会按“最小内容宽度”卡死布局
flex-basis 百分比配合媒体查询做响应式列数切换
这是栅格系统最稳的落地方式。不用 JS 计算列数，纯 CSS 控制每项占多少百分比，靠媒体查询切换即可。
例如 12 栅格系统：
立即学习“前端免费学习笔记（深入）”；
.grid-item {
flex: 0 0 100%;
}
@media (min-width: 768px) {
.grid-item { flex: 0 0 50%; }
}
@media (min-width: 1024px) {
.grid-item { flex: 0 0 25%; }
}
注意：flex-wrap: wrap 必须设在父容器上，否则超出就溢出而不是换行；父容器自身宽度要是确定值（如 width: 100% 或具体像素），否则整个百分比链失去参照基准。
flex-basis 设百分比时最容易忽略的兼容性坑
IE11 是最大变量。它对 flex-basis 的百分比支持极弱——不是不识别，而是解析不稳定，常表现为：首屏渲染正常，刷新后错位；或仅在 devtools 打开时才生效。
- 绕过方案：改用带单位的值，如
flex-basis: 240px，再配合max-width: 100%防溢出 - 若必须用百分比，补全三值并加小数：
flex: 0 0 33.3%，不要写33.33%（IE 对浮点精度敏感） -
box-sizing: border-box必须全局统一，否则 border/padding 会额外撑宽，让 25% × 4 > 100%
真正难的不是写对语法，而是让 flex-basis 的百分比在各种盒模型、各种嵌套层级、各种旧浏览器里都稳定产出预期宽度——这需要把父容器宽度、box-sizing、min-width、flex-wrap 全部拉通验证，缺一不可。
