flex:1能自动均分容器宽度，因它是flex-grow:1、flex-shrink:1、flex-basis:0%的简写，使子元素在主轴上等比伸缩；设置display:flex后，所有flex:1的子元素无论内容长短均平分空间，响应式下也保持等宽；通过gap可安全添加间距，避免margin溢出问题，是现代布局推荐方案。
当需要让多个单行元素在容器中等宽排列时，传统方法如浮动或行内块元素常因间隙、计算不均等问题导致布局困难。使用 flex:1 可以轻松实现子元素自动平均分配父容器宽度，是一种简洁高效的解决方案。
为什么 flex:1 能解决等宽问题
Flexbox 布局中，将父容器设为 display: flex，其子元素会默认沿主轴方向排列。给每个子元素设置 flex: 1，意味着它们都将“伸缩”以均分可用空间，无需关心具体宽度数值。
关键点：
- flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写
- 所有设置了 flex:1 的子元素会平分容器，即使文本内容长度不同
- 响应式场景下也能保持等宽，适配各种屏幕尺寸
基本用法示例
以下是一个三列等宽按钮组的常见场景：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <button class="item">选项一</button> <button class="item">选项二</button> <button class="item">选项三</button> </div>
CSS 样式如下：
.container {
display: flex;
}
.item {
flex: 1;
}
此时三个按钮将完全均分父容器宽度，无须设置 width 或处理 margin 折行问题。
注意事项与扩展技巧
虽然 flex:1 很方便，但需注意以下几点以避免意外布局：
- 父容器必须设置 display: flex，否则 flex 属性无效
- 若某个子元素内容过长且不换行，可能影响其他元素最小宽度，可配合 min-width: 0 使用
- 需要间隔时，推荐使用 gap 属性（现代浏览器支持），避免用 margin 导致总宽溢出
例如添加间距：
.container {
display: flex;
gap: 8px;
}
.container > * {
flex: 1;
}
基本上就这些。用 flex:1 处理等宽排列，简单直接，兼容性好，是现代 CSS 布局的推荐做法。
