如何在CSS中使用Flexbox制作工具栏按钮等分_flex:1均分容器空间-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-28 19:53:02

原创

533人浏览过

使用 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 即每个项目获得相等份额。

实现步骤

以下是创建等分工具栏按钮的具体代码结构：

立即学习“前端免费学习笔记（深入）”；

Magic Write

Canva旗下AI文案生成器

查看详情

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;
}

登录后复制