flex:1让列表项均分父容器宽度的方法非常简单，通过设置display:flex和flex:1属性即可实现。下面是一个完整的示例代码，帮助你理解如何实现这一效果。✅实现方式<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>Flex均分宽度示例</title
时间：2026-01-23 12:18:39 419浏览 收藏
“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《flex:1 实现列表项均分父容器宽度》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！
必须先将 ul 设为 display: flex，再给 li 设置 flex: 1 1 0 并重置 margin/padding，配合 align-items: stretch 和 min-height 才能真正均分且对齐。
用 flex: 1 均分列表项，前提是父容器设为 display: flex
直接写 flex: 1 在 li 上不会生效，因为默认 ul 或 ol 是块级流式布局，不启用 Flex 上下文。必须先让父容器（比如 ul）变成 Flex 容器。
ul需加display: flex，否则子项的flex属性被忽略- 如果列表项有默认
margin或padding（尤其浏览器 UA 样式），会影响均分效果，建议重置：ul { margin: 0; padding: 0; } - 避免给
li设固定宽度（如width: 20%），会和flex: 1冲突
flex: 1 和 flex: 1 1 0 的区别影响均分结果
flex: 1 是简写，等价于 flex: 1 1 0%（注意：不是 0px）。但实际中更推荐显式写成 flex: 1 1 0，因为：
0表示基准值为0，强制忽略子项自身内容宽度，真正按比例“挤占剩余空间”- 若用
flex: 1 1 0%，某些浏览器在子项含长单词或内联元素时仍可能按百分比基线微调，导致轻微不均 - 写
flex: 1 1 0更稳定，尤其配合white-space: nowrap或图标+文字混合时
遇到换行或高度不一致，加 align-items: stretch 和 min-height
均分宽度后，常见问题是列表项高度参差——比如有的文字两行、有的只有一行，视觉上“没对齐”。这不是宽度问题，而是交叉轴对齐策略未统一：
- 确保父容器（
ul）有align-items: stretch（Flex 默认值，但显式声明可防覆盖） - 若内容高度差异大，给
li加min-height: 40px（按需调整）能拉齐底线 - 慎用
height: 100%：它依赖父容器有明确高度，而 Flex 容器通常由内容撑开，容易失效
兼容性注意：IE11 下 flex: 1 对 li 有渲染 bug
IE11 中，li 作为“格式化上下文根元素”时，flex: 1 可能被忽略或计算错误，表现为最后一项变窄或溢出。
- 临时解法：把
li换成div，或在外层包一层div并设display: flex - 更稳妥方案：改用
flex: 0 0 calc(100% / 3)（需预知项数），配合flex-wrap: wrap处理响应式 - 现代项目若无需支持 IE，可放心用
flex: 1 1 0，Safari 12.1+、Chrome 68+、Firefox 63+ 均无异常
ul {
display: flex;
margin: 0;
padding: 0;
}
li {
flex: 1 1 0;
list-style: none;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
均分这事表面简单，但实际卡点常不在 flex 本身，而在父容器是否真进入 Flex 布局、子项是否残留干扰尺寸、以及 IE 这类老环境对语义化元素的特殊处理。今天关于《flex:1让列表项均分父容器宽度的方法非常简单，通过设置display:flex和flex:1属性即可实现。下面是一个完整的示例代码，帮助你理解如何实现这一效果。✅实现方式