在css前端布局开发中，单行元素等宽排列是很多页面场景的基础需求，比如导航栏选项、卡片列表标题、操作按钮组等场景都需要元素宽度一致且均匀填充容器空间。很多开发者初期会尝试使用百分比宽度、固定宽度计算等方式实现，但这些方案往往存在适配性差、计算繁琐、边缘对齐异常等问题。而flex布局中的flex:1属性可以很轻松地实现单行元素等宽排列，不用考虑复杂的宽度计算，还能自动适配容器尺寸变化。
传统等宽排列方案的常见问题
在没有flex布局或者不了解flex:1用法时，开发者常用的等宽排列方案主要有两种，都存在明显的局限性。
百分比宽度方案
假设一行有3个元素，给每个元素设置width: 33.33%，看似可以实现等宽，但实际开发中很容易出现问题。如果元素存在内边距padding、边框border，或者容器存在内边距，元素总宽度会超出容器，导致换行或者溢出。如果要兼容这些属性，还需要手动调整百分比数值，计算非常麻烦。
固定宽度计算方案
先计算容器总宽度，再除以元素个数得到每个元素的固定宽度，这种方案只适配固定尺寸的容器，一旦容器宽度变化，比如屏幕 resize 或者父容器宽度动态调整，就需要重新计算宽度，维护成本很高，不适合响应式场景。
flex:1实现等宽排列的原理
flex布局是css3推出的弹性布局模型，当容器设置display: flex后，子元素会成为弹性项目。flex是flex-grow、flex-shrink、flex-basis三个属性的简写，而flex:1等价于flex-grow:1; flex-shrink:1; flex-basis:0%。
其中flex-grow表示弹性项目的放大比例，默认值为0，即如果存在剩余空间也不放大。flex:1设置所有子元素的flex-grow都为1，意味着剩余空间会被所有子元素平均分配，每个子元素分配到的剩余空间相同，结合flex-basis:0%初始基准宽度为0，最终所有子元素的实际宽度就会完全一致，实现等宽排列。
flex:1等宽排列的实现步骤
实现单行元素等宽排列只需要两步，下面以一行3个元素为例说明。
第一步：设置父容器为flex布局
给包裹所有单行元素的父容器添加display: flex属性，开启flex布局模式，如果需要元素在主轴上均匀分布，还可以添加justify-content属性调整对齐方式，不过实现等宽排列核心不需要该属性。
第二步：给子元素设置flex:1
给每一个需要等宽排列的子元素设置flex:1，不需要手动设置宽度，所有子元素会自动平分父容器的可用空间，实现等宽效果。
完整的代码示例如下：
/* 父容器样式 */
.flex-container {
display: flex;
/* 可选：设置容器内边距，子元素等宽不会受影响 */
padding: 10px;
width: 100%;
background-color: #f5f5f5;
box-sizing: border-box;
}
/* 子元素样式 */
.flex-item {
flex: 1;
/* 可选：添加内边距和边框，不会影响等宽效果 */
padding: 15px;
margin: 0 5px;
border: 1px solid #ddd;
text-align: center;
box-sizing: border-box;
}
对应的html结构如下：
<div class="flex-container">
<div class="flex-item">元素1</div>
<div class="flex-item">元素2</div>
<div class="flex-item">元素3</div>
</div>
上述代码中，三个flex-item元素会自动平分flex-container的宽度，即使给元素添加padding、border、margin，只要设置了box-sizing: border-box，元素的总宽度依然会保持一致，不会出现溢出或者不对齐的问题。
常见适配场景与注意事项
- 如果子元素内容长度差异很大，比如某个元素内部文本特别长，默认情况下flex:1的元素会被内容撑开，导致宽度不一致。此时可以给子元素添加
min-width: 0属性，限制最小宽度为0，避免内容撑开元素破坏等宽效果。 - 如果需要保留元素之间的间距，可以给子元素设置
margin属性，或者使用父容器的gap属性，flex布局会自动计算剩余空间分配，不会影响等宽结果。 - 如果单行元素数量不固定，比如动态渲染的列表，不需要修改任何样式，只要每个子元素都设置
flex:1，就会自动平分宽度，非常适合动态数据场景。 - 如果需要某个元素固定宽度，其他元素等宽排列，可以给固定宽度的元素设置固定
width，其他元素设置flex:1，剩余空间会被其他元素平分，实现混合宽度的布局需求。
通过上述方法，使用flex:1可以轻松解决css单行元素等宽排列的难题，适配各种复杂场景，比传统方案更加灵活高效，是前端布局中非常实用的技巧。