Wie richtet man mit Flexbox ein Element links und ein anderes mittig aus, ohne absolute Positionierung?

Links und zentriert mit Flexbox ausrichten: Eine Lösung ohne absolute Positionierung

Bei Verwendung von Flexbox zum Ausrichten untergeordneter Elemente kann die Ausrichtung schwierig sein verschieben Sie ein Element nach links und zentrieren Sie das andere, ohne eine absolute Positionierung zu verwenden. Hier ist eine Lösung, die ein zusätzliches leeres Element verwendet:

HTML:

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

CSS:

<code class="css">.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;
}</code>

Erklärung:

1. Das linke und das rechte Element sind auf Flex: 1 eingestellt, wodurch sie wachsen, um den verfügbaren Platz gleichmäßig zu verteilen.
2. Das leere rechte Element garantiert, dass das linke Element das mittlere Element nicht aus der Mitte drückt.

Dieser Ansatz schafft eine konsistente und zentrierte Ausrichtung, ohne dass eine absolute Positionierung oder Duplizierung des linken Inhalts auf dem rechten erforderlich ist.

Das obige ist der detaillierte Inhalt vonWie richtet man mit Flexbox ein Element links und ein anderes mittig aus, ohne absolute Positionierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!