Środkowy element należy wycentrować, gdy elementy boczne mają różne szerokości

Tutaj wpisz opis obrazka

Wyobraź sobie następujący układ, gdzie kropki reprezentują przestrzeń między polami: 

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

Kiedy usuwam prawe pole, Lubię, aby środkowe pole nadal było w środku, tak: 

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

To samo dotyczy, jeśli usunę lewe pudełko.

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

Teraz, gdy zawartość w środku pola wydłuży się, zajmie tyle wolnego miejsca, ile potrzeba, pozostając wyśrodkowanym. Lewa i prawa skrzynia nigdy się nie skurczy i w związku z tym, gdy nie ma spacji, overflow:hidden i text-overflow: ellipsis wejdą w życie, aby złamać zawartość; 

[Left box][Center boxxxxxxxxxxxxx][Right box]
Wszystko to jest moją idealną sytuacją, ale nie mam pojęcia, jak osiągnąć ten efekt. Ponieważ kiedy tworzę strukturę flex jak tak: 
.parent {
    display : flex; // flex box
    justify-content : space-between; // horizontal alignment
    align-content   : center; // vertical alignment
}

Jeśli lewe i prawe pudełko będzie dokładnie tego samego rozmiaru, uzyskam pożądany efekt. Jednak gdy jeden z dwóch jest z innego rozmiaru, wyśrodkowane pudełko nie jest już naprawdę wyśrodkowane.

Czy jest ktoś, kto może pomóc ja?

Update

A justify-self byłoby miło, to byłoby idealne: 

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

.rightBox {
    justify-self : flex-end;
}
Author: Michael_B, 2015-09-03
Source

3 answers

Jeśli lewe i prawe pudełka byłyby dokładnie tego samego rozmiaru, uzyskuję pożądany efekt. Jednak gdy jeden z dwóch ma inny rozmiar, wyśrodkowane pudełko nie jest już naprawdę wyśrodkowane. Czy jest ktoś, kto może mi pomóc?

Oto metoda wykorzystująca flexbox do wyśrodkowania środkowego elementu, niezależnie od szerokości rodzeństwa.

Kluczowe cechy:

  • czysty CSS
  • brak absolutnego pozycjonowania
  • no JS / jQuery

Użyj zagnieżdżonego pojemniki flex i auto marginesy: 

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

Oto Jak to działa:

  • top-level div (.container) jest kontenerem flex.
  • każdy potomek div (.box) jest teraz elementem flex.
  • każdy .box element jest podany flex: 1 w celu równomiernego rozłożenia przestrzeni kontenera (więcej szczegółów ).
  • teraz elementy zajmują całą przestrzeń w wierszu i mają równą szerokość.
  • Uczyń każdy element (zagnieżdżonym) elastycznym kontenerem i dodaj justify-content: center.
  • teraz każdy span element jest wyśrodkowanym elementem flex.
  • użyj marginesów flex auto, aby przesunąć zewnętrzne span w lewo i w prawo.
Możesz także zrezygnować z justify-content i używać wyłącznie marginesów auto.

Ale justify-content może działać tutaj, ponieważ auto marginesy zawsze mają priorytet.

8.1. / Align = "left" / ]} marginesy

Przed wyrównaniem przez justify-content i align-self, wszelkie dodatnia wolna przestrzeń jest dystrybuowana na auto marginesach w tym wymiarze.

 48
Author: Michael_B,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-30 11:19:11
  1. użyj trzech elementów flex w pojemniku
  2. Ustaw flex: 1 na pierwszą i ostatnią. To sprawia, że rosną równo, aby wypełnić dostępną przestrzeń pozostawioną przez środkową.
    3. W ten sposób środkowy będzie miał tendencję do centrowania się.

  3. Jednakże, jeśli pierwszy lub ostatni element ma szeroką zawartość, ten element flex również wzrośnie ze względu na nową wartość początkową min-width: auto.

    Uwaga Chrome wydaje się nie implementować tego poprawnie. Można jednak ustawić min-width na -webkit-max-content lub -webkit-min-content i będzie praca też.

  4. Tylko w takim przypadku element środkowy zostanie wypchnięty ze środka.

.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>
 11
Author: Oriol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-22 14:22:46

Możesz to zrobić tak: 

.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>
 5
Author: Michael Morton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-13 07:23:38