如何让flex容器内按钮不占满宽度，实现三元素两端居中布局？

问题根源 #

你给.left和.right设置了flex: 1，这是flex-grow:1、flex-shrink:1、flex-basis:0%的简写，会强制这两个元素平分容器剩余空间，导致按钮所在的.right被拉伸至填满分配到的宽度。同时你的HTML存在语法错误：<button class="right"></div>应改为</button>。

修复方案 #

调整CSS，让左右元素仅适配自身内容宽度，中间元素填充剩余空间实现居中：

.parent {
  display: flex;
  flex-direction: row;
  align-items: center; /* 可选，让三个元素垂直居中对齐 */
}

.center {
  flex: 1; /* 占据左右元素之外的全部剩余空间 */
  text-align: center; /* 使中间元素内容水平居中 */
}

/* 移除.left和.right的flex:1设置，让它们宽度由自身内容决定 */

修正后的HTML：

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <button class="right">Button</button>
</div>

效果说明 #

• .left：仅占据自身内容宽度，自然居左
• .center：填充左右元素间的所有空间，通过text-align:center让内部内容水平居中
• .right：按钮宽度由自身文本和内边距决定，自然居右，不会被过度拉伸

内容的提问来源于stack exchange，提问作者Sherbet Head