Держите средний предмет в центре, если боковые элементы имеют разную ширину

Представьте себе следующий макет, где точки представляют пространство между полями:

[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;
}

Ответы

Ответ 1

Если левый и правый поля будут точно такого же размера, я получаю желаемый эффект. Однако, когда один из двух разных размеров, центрированная коробка больше не центрируется. Есть ли кто-нибудь, кто может мне помочь?

Вот гибкий метод, который идеально центрирует средний элемент, независимо от ширины братьев и сестер.

чистый CSS
Абсолютное позиционирование
нет JS/jQuery

Используйте вложенные гибкие контейнеры и поля auto:

 .container {
 дисплей: flex;
}
.box {
 flex: 1;
 дисплей: flex;
 justify-content: center;
}

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

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

/* несущественный */
.box {
 align-items: center;
 border: 1px solid #ccc;
 background-color: lightgreen;
 высота: 40 пикселей;
}
п {
 text-align: center;
 margin: 5px 0 0 0;
}Код>

  < div class= "container" >
 < div class= "box" > <span> короткий текст </span> </div>
 < div class= "box" > <span> centered text </span> </div>
 < div class= "box" > <span> loooooooooooooooong text </span></div; & div;
</дел >
<p> > 8593 <br> истинный центр </p>

Ответ 2

Используйте три гибких элемента в контейнере
Установите flex: 1 на первый и последний. Это заставляет их расти одинаково, чтобы заполнить доступное пространство, оставленное средним.
Таким образом, средний будет иметь тенденцию центрировать.
Однако, если первый или последний элемент имеет широкий контент, этот гибкий элемент также будет расти из-за нового начального значения min-width: auto.

Примечание. Chrome, похоже, не выполняет это правильно. Однако вы можете установить min-width на -webkit-max-content или -webkit-min-content, и он тоже будет работать.
Только в этом случае средний элемент будет вытолкнут из центра.

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

Ответ 3

Вы можете сделать это так:

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