当边项宽度不同时，保持中间项居中

想象一下下面的布局，其中圆点代表盒子之间的空间:

[Left box]......[Center box]......[Right box]

当我移除右边的方框时，我希望中间的方框仍然在中间，就像这样:

[Left box]......[Center box].................

如果我移除左边的方框也是一样的。

................[Center box].................

现在，当中心框中的内容变长时，它将根据需要占用尽可能多的可用空间，同时保持居中。左右方框永远不会缩小，因此当没有空格时，overflow:hidden和text-overflow:省略号将生效，破坏内容;

[Left box][Center boxxxxxxxxxxxxx][Right box]

以上都是我的理想情况，但是我不知道如何达到这个效果。因为当我创建一个这样的伸缩结构时:

.parent {
    display : flex; // flex box
    justify-content : space-between; // horizontal alignment
    align-content   : center; // vertical alignment
}

如果左右方框的大小完全相同，我就会得到想要的效果。然而，当其中一个的大小不同时，居中的盒子就不再是真正的居中。

有人能帮我吗?

更新

一个自我证明很好，这很理想

.leftBox {
     justify-self : flex-start;
}

.rightBox {
    justify-self : flex-end;
}

当前回答

关键是要使用弹性基准。那么解决方案很简单:

.parent {
    display: flex;
    justify-content: space-between;
}

.left, .right {
   flex-grow: 1;
   flex-basis: 0;
}

CodePen可以在这里找到。

2021-01-07 10:15:55

其他回答

关键是要使用弹性基准。那么解决方案很简单:

.parent {
    display: flex;
    justify-content: space-between;
}

.left, .right {
   flex-grow: 1;
   flex-basis: 0;
}

CodePen可以在这里找到。

2021-01-07 10:15:55

你可以这样做:

.bar { display: flex; background: #B0BEC5; } .l { width: 50%; flex-shrink: 1; display: flex; } .l-content { background: #9C27B0; } .m { flex-shrink: 0; } .m-content { text-align: center; background: #2196F3; } .r { width: 50%; flex-shrink: 1; display: flex; flex-direction: row-reverse; } .r-content { background: #E91E63; } <div class="bar"> <div class="l"> <div class="l-content">This is really long content. More content. So much content.</div> </div> <div class="m"> <div class="m-content">This will always be in the center.</div> </div> <div class="r"> <div class="r-content">This is short.</div> </div> </div>

2016-05-13 07:23:38

Michael Benjamin给出了一个不错的答案，但没有理由不能/不应该进一步简化:

.container {
  display: flex;
}

.box {
  flex: 1;
  display: flex;
  justify-content: center;
}

.box:first-child { justify-content: left; }

.box:last-child  { justify-content: right;  }

和html

<div class="container">
  <div class="box">short text</div>
  <div class="box">centered tex</div>
  <div class="box">loooooooooooooooong text</div>
</div>

2022-01-18 19:09:15

你也可以使用这个简单的方法来达到中间元素的精确中心对齐:

.container {
    display: flex;
    justify-content: space-between;
}

.container .sibling {
    display: flex;
    align-items: center;
    height: 50px;
    background-color: gray;
}

.container .sibling:first-child {
    width: 50%;
    display: flex;
    justify-content: space-between;
}

.container .sibling:last-child {
    justify-content: flex-end;
    width: 50%;
    box-sizing: border-box;
    padding-left: 100px; /* .center's width divided by 2 */
}

.container .sibling:last-child .content {
    text-align: right;
}

.container .sibling .center {
    height: 100%;
    width: 200px;
    background-color: lightgreen;
    transform: translateX(50%);
}

codepen: https://codepen.io/ErAz7/pen/mdeBKLG

2020-05-01 21:04:09

这里有一个答案，使用网格而不是flexbox。这个解决方案不需要像接受的答案那样在HTML中添加额外的孙子元素。即使一边的内容足够长，溢出到中间，它也能正常工作，不像2019年的网格答案。

这个解决方案没有做的一件事是显示省略号或隐藏在中心框中的额外内容，如问题中所述。

section { display: grid; grid-template-columns: 1fr auto 1fr; } section > *:last-child { white-space: nowrap; text-align: right; } /* not essential; just for demo purposes */ section { background-color: #eee; font-family: helvetica, arial; font-size: 10pt; padding: 4px; } section > * { border: 1px solid #bbb; padding: 2px; } <section> <div>left</div> <div>center</div> <div>right side is longer</div> </section> <section> <div>left</div> <div>center</div> <div>right side is much, much longer</div> </section> <section> <div>left</div> <div>center</div> <div>right side is much, much longer, super long in fact</div> </section>

2020-06-21 16:47:50

当边项宽度不同时，保持中间项居中

推荐文章

最新文章

标签