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

введите описание изображения здесь

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

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