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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-28

浏览次数：次

返回列表

使用 flex: 1 可让工具栏按钮均分容器空间。通过设置父容器 display: flex，子元素 flex: 1，即可实现等宽布局，适用于导航栏等场景，配合 gap 可添加间距，支持响应式且无需计算宽度。

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

在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 结构：

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

<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 实现等宽均分
去除默认边框和内边距可提升视觉一致性