wake-up-neo.com

Elemente links und mit der Flexbox zentrieren

Ich benutze Flexbox, um meine Kindelemente auszurichten. Ich würde gerne ein Element zentrieren und das andere ganz links liegen lassen. Normalerweise würde ich nur das linke Element mit margin-right: auto setzen. Das Problem ist, dass das mittlere Element aus der Mitte verschoben wird. Ist das möglich ohne absolute Positionierung?

HTML & CSS

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 500px;
}
#left {
  margin-right: auto;
}
#center {
  margin: auto;
}
<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
</div>

26
Carl Edwards

EDIT: Siehe Solos Antwort unten ist es die bessere Lösung.


Die Idee von flexbox ist die Bereitstellung eines Rahmens zum einfachen Ausrichten von Elementen mit variablen Abmessungen innerhalb eines Containers. Daher macht es wenig Sinn, ein Layout bereitzustellen, bei dem die Breite eines Elements völlig ignoriert wird. Im Wesentlichen ist dies genau das, was für die absolute Positionierung gilt, da das Element aus dem normalen Fluss herausgenommen wird.

Soweit ich weiß, gibt es keine schöne Möglichkeit, dies ohne die Verwendung von position: absolute; zu tun, also würde ich vorschlagen, es zu verwenden ... aber wenn Sie WIRKLICH nicht wollen oder keine absolute Positionierung verwenden können, könnten Sie sie verwenden eine der folgenden Problemumgehungen. 


Wenn Sie die genaue Breite des "Left" -Divs kennen, können Sie justify-content in flex-start (links) ändern und das "Center" -Div wie folgt ausrichten:

#center {
    position: relative;
    margin: auto;
    left: -{half width of left div}px;
}

Wenn Sie die Breite nicht kennen, können Sie "Left" auf der rechten Seite duplizieren, justify-content: space-between; verwenden und das neue rechte Element ausblenden: Nur um klar zu sein, das ist wirklich wirklich hässlich ... besser, absolute Positionierung zu verwenden, als den Inhalt zu duplizieren. :-)

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 500px;
}
#right {
    opacity: 0;
}
<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
  <span id="right">Left</span>
</div>

18
pschueller

Drittes leeres Element hinzufügen:

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

Und der folgende Stil:

.parent {
  display: flex;
}
.left, .right {
  flex: 1;
}

Nur links und rechts werden wachsen und dank der Fakten, die ...

  • es gibt nur zwei wachsende Elemente (egal ob leer) und
  • dass beide die gleiche Breite haben (sie verteilen den verfügbaren Platz gleichmäßig)

... Mittenelement wird immer perfekt zentriert.

Dies ist meiner Meinung nach viel besser als eine akzeptierte Antwort, da Sie den linken Inhalt nicht nach rechts kopieren und ausblenden müssen, um die gleiche Breite für beide Seiten zu erhalten, es passiert einfach magisch (Flexbox ist magisch).


In Aktion:

.parent {
  display: flex;
}

.left,
.right {
  flex: 1;
}


/* Styles for demonstration */
.parent {
  padding: 5px;
  border: 2px solid #000;
}
.left,
.right {
  padding: 3px;
  border: 2px solid red;
}
.center {
  margin: 0 3px;
  padding: 3px;
  border: 2px solid blue;
}
<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

33
Solo

Versuchen Sie dies ohne Hacks :)

CSS

.container{
  width: 500px;
  margin: 0 auto;
}
.box{
  display: flex;
  align-items: center;/* just in case*/
  justify-content: space-between;
}
.box p:nth-child(2){
  text-align: center;
  background-color: Lime;
  flex: 1 1 0px;
}

HTML

<div class="container">
  <div class="box">
    <p>One</p>
    <p>Two</p>
  </div>
</div>

http://codepen.io/whisher/pen/XpGaEZ

1
Whisher

Ich habe eine andere Lösung. Meines Erachtens ist das Hinzufügen eines leeren Blocks zum mittleren Element in Ordnung, aber in Bezug auf den Code etwas hässlich. Meine Lösung dafür ist unten

    <div id="parent">
      <span id="left">Left</span>
      <span id="center">Center</span>
    </div>

   #parent {
      display: flex;    
   }

   #left {
      flex:1;
   } 

   #center {
      flex:1;
   } 

   #parent:after {
      flex:1;
   }
1

Wenn Sie sich nicht auf die Positionierung verlassen wollen, ist die einzige Möglichkeit, die ich wirklich zentriert habe, die Verwendung einer Kombination aus automatischem Rand und negativem Rand, um zu verhindern, dass das zentrierte Element durch das links ausgerichtete Element verschoben wird. Dazu müssen Sie jedoch die genaue Breite des links ausgerichteten Elements kennen.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: center;
}

.block {
  width: 120px;
  background: tomato;
}

.justify-start {
  margin-right: auto;
}

.justify-center {
  margin-right: auto;
  margin-left: -120px;
}
<div class="container">
  <div class="block justify-start"></div>
  <div class="block justify-center"></div>
</div>

0
Blizwire