如何在CSS中使用Flexbox制作工具栏按钮等分_flex:1均分容器空间

使用 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 结构：

  撤销
  重做
  保存
  打印

CSS 样式：

.toolbar {
  display: flex;
  width: 100%; /* 或指定固定宽度 */
}
.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 容器，就能轻松实现工具栏按钮的自动等分，无需计算百分比或使用浮动，响应式表现也很好。不复杂但容易忽略细节。