如何用Flexbox实现2个元素居中、1个元素居右的布局？

嘿，我来帮你搞定这个布局问题！不用空div完全没问题，不管是Flexbox还是CSS Grid都能轻松实现，下面给你具体的方案：

一、Flexbox方案（两种可选） #

方案1：简洁版（无需额外分组） #

这个方法利用Flexbox的auto margin特性，不用给居中元素套额外容器，代码最精简：

HTML结构

<div class="top-bar-wrapper">
  <div class="top-bar">
    <span>元素A</span>
    <span>元素B</span>
    <div class="right-item">元素C</div>
  </div>
</div>

CSS代码

body { margin: 0 }
.top-bar-wrapper { 
  height: 30px; 
  background-color: black; 
  color: white; 
  display: flex; 
  align-items: center; /* 确保内部元素垂直居中 */
}
.top-bar { 
  display: flex; 
  width: 100%; 
  max-width: 1080px; 
  margin: 0 auto; 
  padding: 0 5px;
  justify-content: center; /* 先让前两个元素居中 */
}
.right-item {
  margin-left: auto; /* 关键：用auto margin把元素C推到最右侧 */
}

方案2：分组版（更清晰的结构） #

如果希望把居中元素归为一组，方便后续样式管理，可以用这个方法：

HTML结构

<div class="top-bar-wrapper">
  <div class="top-bar">
    <div class="center-items">
      <span>元素A</span>
      <span>元素B</span>
    </div>
    <div class="right-item">元素C</div>
  </div>
</div>

CSS代码

body { margin: 0 }
.top-bar-wrapper { 
  height: 30px; 
  background-color: black; 
  color: white; 
  display: flex; 
  align-items: center;
}
.top-bar { 
  display: flex; 
  width: 100%; 
  max-width: 1080px; 
  margin: 0 auto; 
  padding: 0 5px;
}
.center-items {
  margin: 0 auto; /* 让分组容器在剩余空间里水平居中 */
  display: flex;
  gap: 10px; /* 可选：给两个居中元素添加间距 */
}

二、CSS Grid方案 #

Grid布局在这类场景下也非常直观，同样不需要空div：

HTML结构

<div class="top-bar-wrapper">
  <div class="top-bar">
    <span>元素A</span>
    <span>元素B</span>
    <div class="right-item">元素C</div>
  </div>
</div>

CSS代码

body { margin: 0 }
.top-bar-wrapper { 
  height: 30px; 
  background-color: black; 
  color: white; 
  display: flex; 
  align-items: center;
}
.top-bar { 
  display: grid; 
  width: 100%; 
  max-width: 1080px; 
  margin: 0 auto; 
  padding: 0 5px;
  grid-template-columns: auto auto 1fr; /* 前两列自适应内容，第三列占满剩余空间 */
  align-items: center;
}
.right-item {
  justify-self: end; /* 让第三列的元素靠右对齐 */
}

另一种Grid写法（左右留白对称） #

如果希望居中元素左右的留白是对称的，可以用这个写法：

.top-bar { 
  display: grid; 
  width: 100%; 
  max-width: 1080px; 
  margin: 0 auto; 
  padding: 0 5px;
  grid-template-columns: 1fr auto auto 1fr; /* 左右两列平分剩余空间 */
  gap: 10px; /* 可选间距 */
  align-items: center;
}
.right-item {
  grid-column: 4; /* 把元素C放到第四列 */
  justify-self: end;
}

以上几种方案都能完美实现你要的“两个元素居中、一个元素居右”的效果，而且完全不用空div，你可以根据自己的习惯选择~

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