将 3 个不相等的块左、中、右对齐

2022-01-30 00:00:00 css flexbox

我正在尝试对齐由 3 个内容块组成的顶部菜单.

I'm trying to align a top menu which consists of 3 blocks of content.

我想要实现的是:

  • 块 1:左对齐
  • 块 2:水平居中
  • 块 3:右对齐

如果所有 3 个块的大小相同，我可以使用 flexbox(如代码段中所示)，但它们不是，所以它不会产生我需要的输出.

If all 3 blocks were the same size, I could use flexbox (as in the snippet), but they're not, so it doesn't produce the output I require.

相反，flexbox 在 3 个块之间放置相等的空间 - 导致中间块偏离中心对齐.

Instead, flexbox puts equal space between the 3 blocks - resulting in the middle block being aligned off-center.

我想知道这是否可以通过 flexbox 实现，或者如果不能，另一种解决方案.这需要在生产中稳健地工作，因此网格"解决方案不适用，因为支持不足.

I was wondering if this could be achieved with flexbox, or if not, another solution. This needs to work robustly in production so a 'Grid' solution is not applicable as there is insufficient support.

.container {
  margin: 20px 0;
}

.row {
  background-color: lime;
  display: flex;
  justify-content: space-between;
}

.item {
  background-color: blue;
  color: #fff;
  padding: 16px;
}

<div class="container">
  <div class="row">
    <div class="item">left, slightly longer</div>
    <div class="item">center, this item is much longer</div>
    <div class="item">right</div>
  </div>
</div>

推荐答案

左右元素可以考虑 flex-grow:1;flex-basis:0% 然后使用 text-align 对齐里面的内容.我添加了一个额外的包装器以仅将背景保留在文本周围.

You can consider flex-grow:1;flex-basis:0% for the left and right elements then use text-align to align content inside. I have added an extra wrapper to keep the background only around the text.

诀窍是通过仅删除中间内容并将其平均拆分为左右元素来计算可用空间.

The trick is to calculate the free space by removing only the middle content and split it equally to the left and right element.

.container {
  margin: 20px 0;
  padding-top:10px;
  background:linear-gradient(#000,#000) center/5px 100% no-repeat; /*the center*/
}

.row {
  background-color: lime;
  display: flex;
  color: #fff;
}

.item:not(:nth-child(2)) {
  flex-basis: 0%;
  flex-grow: 1;
}

.item:last-child {
  text-align: right;
}

.item span{
  background-color: blue;
  display:inline-block;
  padding: 16px;
  border: 2px solid red;
  box-sizing:border-box;
}

<div class="container">
  <div class="row">
    <div class="item"><span>left, slightly longer</span></div>
    <div class="item"><span>center, this item is much longer</span></div>
    <div class="item"><span>right</span></div>
  </div>
</div>

您也可以通过保持元素关闭来执行相同的操作.只需调整 text-align:

You can also do the same by keeping the element close. Simply adjust text-align:

.container {
  margin: 20px 0;
  padding-top: 10px;
  background: linear-gradient(#000, #000) center/5px 100% no-repeat; /*the center*/
}

.row {
  background-color: lime;
  display: flex;
  color: #fff;
}

.item:not(:nth-child(2)) {
  flex-basis: 0%;
  flex-grow: 1;
}

.item:first-child {
  text-align: right;
}

.item span {
  background-color: blue;
  display: inline-block;
  padding: 16px;
  border: 2px solid red;
  box-sizing: border-box;
}

<div class="container">
  <div class="row">
    <div class="item"><span>left, slightly longer</span></div>
    <div class="item"><span>center, this item is much longer</span></div>
    <div class="item"><span>right</span></div>
  </div>
</div>

相关文章