左，中和右对齐3个不相等的块 [英] Align 3 unequal blocks left, center and right

问题描述

我正在尝试对齐由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;
  height:100%;
  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>

您也可以通过使元素保持关闭来执行相同的操作.只需调整文本对齐即可:

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;
  height:100%;
  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>

这篇关于左，中和右对齐3个不相等的块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！