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

Elemente links und zentriert mit Flexbox ausrichten

Problem:

Untergeordnete Elemente ausrichten innerhalb eines Flexbox-Containers, wobei ein Element zentriert und das andere nach links ausgerichtet ist.

Code:

#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;
}

Problem:

Mit margin-right: auto wird das zentrierte Element außermittig verschoben.

Lösung ohne absolute Positionierung:

Drittes leeres Element hinzufügen:

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

Wenden Sie die folgenden Stile an:

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

Erklärung:

Links und rechts sind so eingestellt, dass sie wachsen (Flex: 1) und sich gleichmäßig verteilen der verfügbare Platz. Da das leere rechte Element die gleiche Breite wie das linke hat, bleibt das mittlere Element perfekt zentriert.

Vorteile dieser Lösung:

• Kein Kopieren von Inhalten erforderlich zwischen Elementen.
• Perfekt zentriertes Element, unabhängig von der Inhaltsbreite.

Das obige ist der detaillierte Inhalt vonWie richte ich Elemente in 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!