Wie richte ich Elemente mit Flexbox links und zentriert aus, ohne sie absolut zu positionieren?

Elemente links und zentriert mit Flexbox ausrichten

Flexbox bietet eine leistungsstarke Möglichkeit, Elemente innerhalb eines Containers auszurichten. Eine häufige Herausforderung entsteht jedoch, wenn versucht wird, ein Element links und ein anderes in der Mitte auszurichten, ohne auf die absolute Positionierung zurückzugreifen.

Das Problem

Bei der Verwendung von Rand- rechts: Automatisch, um das linke Element auszurichten. Dadurch wird das mittlere Element versehentlich nach rechts verschoben. Dies liegt daran, dass der Auto-Wert den verbleibenden Platz gleichmäßig auf die Elemente verteilt, auf die er angewendet wird.

Die Lösung ohne absolute Positionierung

Um dieses Problem ohne absolute Positionierung zu umgehen, Fügen Sie dem Container ein drittes leeres Element hinzu:

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

Anschließend wenden Sie das folgende CSS an:

<code class="css">.parent {
  display: flex;
}

.left, .right {
  flex: 1;
}</code>

Wie es funktioniert

Das Die Flex-Eigenschaft bestimmt, wie der verfügbare Platz auf die wachsenden Elemente verteilt wird. In diesem Fall sind sowohl die linke als auch die rechte Seite so eingestellt, dass sie wachsen und den Raum zwischen ihnen gleichmäßig verteilen. Da es nur zwei wachsende Elemente gibt, wird das mittlere Element immer perfekt zentriert sein.

Vorteile dieses Ansatzes

Dieser Ansatz ist der akzeptierten Antwort in mehrfacher Hinsicht überlegen :

• Es ist nicht erforderlich, linken Inhalt nach rechts zu kopieren und auszublenden, um für beide Seiten die gleiche Breite zu erreichen.
• Es verlässt sich auf die inhärenten Eigenschaften von Flexbox, um das Gewünschte zu erreichen Ausrichtung, was es zu einer eleganteren Lösung macht.

Das obige ist der detaillierte Inhalt vonWie richte ich Elemente mit Flexbox links und zentriert aus, ohne sie absolut zu positionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!