使用 flex: 1 可让工具栏按钮均分容器空间。通过设置父容器 display: flex，子元素 flex: 1，即可实现等宽布局，适用于导航栏等场景，配合 gap 可添加间距，支持响应式且无需计算宽度。
在CSS中使用Flexbox让工具栏按钮等分容器空间，最简单高效的方式是结合 display: flex 和 flex: 1。这种方法能让所有子元素自动均分父容器的可用空间，特别适合导航栏、工具栏或选项卡这类布局。
基本原理：flex: 1 实现均分
flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的缩写。当多个子元素都设置为 flex: 1 时，它们会平分父容器的主轴空间。
提示：flex-basis 为 0 表示从零开始分配空间，flex-grow 控制剩余空间的放大比例，设为 1 即每个项目获得相等份额。
实现步骤
以下是创建等分工具栏按钮的具体代码结构：
立即学习“前端免费学习笔记（深入）”；
HTML 结构：
<div class="toolbar"> <button class="btn">撤销</button> <button class="btn">重做</button> <button class="btn">保存</button> <button class="btn">打印</button> </div>
CSS 样式：
.toolbar {
display: flex;
width: 100%; /* 或指定固定宽度 */
}
<p>.btn {
flex: 1;
padding: 12px 0;
border: none;
background-color: #f0f0f0;
text-align: center;
}
- 父容器设置
display: flex启用弹性布局 - 每个按钮设置
flex: 1实现等宽均分 - 去除默认边框和内边距可提升视觉一致性
注意事项与扩展用法
这种写法适用于大多数现代浏览器，但在某些场景下需要注意：
- 如果某个按钮内容过长，默认不会换行，可能影响布局，可加
word-break: break-all控制 - 若想让部分按钮不参与均分（如“更多”菜单），可单独设置该按钮的
flex值为initial或具体宽度 - 配合
gap属性可在按钮间添加间距而不影响等分效果：.toolbar { gap: 1px; }
基本上就这些。用 flex: 1 配合 Flexbox 容器，就能轻松实现工具栏按钮的自动等分，无需计算百分比或使用浮动，响应式表现也很好。不复杂但容易忽略细节。
