当侧面物品具有不同宽度时,保持中间物品居中

Question

想象一下以下布局,其中圆点表示框之间的空间:

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

当我移除右边的盒子时,我喜欢中心盒仍然位于中心,如下所示:

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

如果我删除左框也是如此.

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

现在,当中心框内的内容变得更长时,它将占用尽可能多的可用空间,同时保持居中.左边和右边框将永远不会收缩,因此当没有剩余空间的地方overflow:hidden,并text-overflow: ellipsis会在效果打破了内容;

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

以上都是我理想的情况,但我不知道如何实现这个效果.因为当我创建一个像这样的flex结构时:

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

如果左右框的大小完全相同,我会得到所需的效果.然而,当两者中的一个来自不同尺寸时,居中的盒子不再真正居中.

有没有人可以帮助我？

更新

A justify-self会很好,这将是理想的:

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

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

Answer 1

如果左右框的大小完全相同,我会得到所需的效果.然而,当两者中的一个是不同尺寸时,居中的盒子不再真正居中.有没有人可以帮助我？

这是一种使用flexbox将中间项目居中的方法,无论兄弟姐妹的宽度如何.

主要特点:

• 纯CSS
• 没有绝对的定位
• 没有JS/jQuery

使用嵌套的flex容器和auto边距:

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

.box:first-child > span { margin-right: auto; }

.box:last-child  > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}
p {
  text-align: center;
  margin: 5px 0 0 0;
}

<div class="container">
  <div class="box"><span>short text</span></div>
  <div class="box"><span>centered text</span></div>
  <div class="box"><span>loooooooooooooooong text</span></div>
</div>
<p>&#8593;<br>true center</p>

以下是它的工作原理:

• 顶级div(.container)是一个flex容器.
• 每个子div(.box)现在都是一个flex项.
• .box给出每个项目flex: 1以平均分配容器空间(更多细节).
• 现在这些项目消耗了行中的所有空间并且宽度相等.
• 使每个项目成为(嵌套的)Flex容器并添加justify-content: center.
• 现在每个span元素都是一个居中的flex项.
• 使用弹性auto边距span向左和向右移动外侧.

您也可以放弃justify-content并auto专门使用保证金.

但是justify-content可以在这里工作,因为auto利润总是优先考虑.

8.1.与auto 边距对齐

在通过justify-content和进行对齐之前align-self,任何正的自由空间都会分配到该维度中的自动边距.

Answer 2

1. 在容器中使用三个flex项
2. 设置flex: 1为第一个和最后一个.这使它们平等地增长以填充中间留下的可用空间.
3. 因此,中间的一个将倾向于居中.

4. 但是,如果第一个或最后一个项目的内容较宽,则该弹性项目也会因新的min-width: auto初始值而增长.

   注意Chrome似乎没有正确实现此功能.但是,您可以设置min-width为-webkit-max-content或-webkit-min-content它也可以工作.

5. 只有在这种情况下,中间元素才会被推出中心.

.outer-wrapper {
  display: flex;
}
.item {
  background: lime;
  margin: 5px;
}
.left.inner-wrapper, .right.inner-wrapper {
  flex: 1;
  display: flex;
  min-width: -webkit-min-content; /* Workaround to Chrome bug */
}
.right.inner-wrapper {
  justify-content: flex-end;
}
.animate {
  animation: anim 5s infinite alternate;
}
@keyframes anim {
  from { min-width: 0 }
  to { min-width: 100vw; }
}

<div class="outer-wrapper">
  <div class="left inner-wrapper">
    <div class="item animate">Left</div>
  </div>
  <div class="center inner-wrapper">
    <div class="item">Center</div>
  </div>
  <div class="right inner-wrapper">
    <div class="item">Right</div>
  </div>
</div>
<!-- Analogous to above --> <div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item animate">Center</div></div><div class="right inner-wrapper"><div class="item">Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item">Center</div></div><div class="right inner-wrapper"><div class="item animate">Right</div></div></div>

Answer 3

这是一个使用 grid 而不是 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>

Answer 4

关键是用flex-basis。那么解决方案很简单：

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

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

CodePen在此处可用。

Answer 5

我想要问题中显示的确切结果，我结合了 gamliela 和 Erik Mart\xc3\xadn Jord\xc3\xa1n 的答案，它最适合我。

\n

.parent {\n    display: flex;\n    justify-content: space-between;\n}\n\n.left, .right {\n   flex-grow: 1;\n   flex-basis: 0;\n}\n\n.right {\n   display: flex;\n   justify-content: flex-end;\n}\n

\n

Answer 6

display: flex这是另一种方法，在父母和孩子中使用：

.Layout{
    display: flex;
    justify-content: center;
}
.Left{
    display: flex;
    justify-content: flex-start;
    width: 100%;
}
.Right{
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

<div class = 'Layout'>
    <div class = 'Left'>I'm on the left</div>
    <div class = 'Mid'>Centered</div>
    <div class = 'Right'>I'm on the right</div>
</div>

Answer 7

你可以这样做:

.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>

Answer 8

代替默认使用flexbox，使用grid可以在两行CSS中解决它，而在顶级子级中没有额外的标记。

HTML：

<header class="header">
  <div class="left">variable content</div>
  <div class="middle">variable content</div>
  <div class="right">variable content which happens to be very long</div>
</header>

CSS：

.header {
  display: grid;
  grid-template-columns: [first] 20% auto [last] 20%;
}
.middle {
  /* use either */
  margin: 0 auto;
  /* or */
  text-align: center;
}

Flexbox摇摇欲坠，但不应成为所有解决方案的答案。在这种情况下，网格显然是最干净的选择。

甚至为您的测试乐趣制作了Codepen：https：//codepen.io/anon/pen/mooQOV

Answer 9

稍微更强大的网格解决方案如下所示：

.container {
  overflow: hidden;
  border-radius: 2px;
  padding: 4px;
  background: orange;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
}

.item > div {
  display: inline-block;
  padding: 6px;
  border-radius: 2px;
  background: teal;
}

.item:last-child > div {
  float: right;
}

<div class="container">
  <div class="item"><div contenteditable>edit the text to test the layout</div></div>
  <div class="item"><div contenteditable>just click me and</div></div>
  <div class="item"><div contenteditable>edit</div></div>
</div>

您可以在 Codepen 中看到它：https ://codepen.io/benshope2234/pen/qBmZJWN