Wie kann ich einen mittleren Artikel in einem Flexbox-Layout mit ungleichmäßig großen Seitenartikeln zentrieren?

Zentrieren des Mittelelements bei unterschiedlichen Seitenelementbreiten

In einem Flexbox-Layout kann die perfekte Ausrichtung des Mittelelements bei unterschiedlichen Seitenelementbreiten eine Herausforderung sein verschiedene Breiten. Um dieses Problem zu lösen, können wir verschachtelte Flex-Container mit automatischen Rändern verwenden.

Die Schlüsselkonzepte hinter diesem Ansatz sind:

• Die Verwendung verschachtelter Flex-Container stellt sicher, dass die Artikel innerhalb und zwischen ihnen verteilt werden die Boxen wie gewünscht.
• Durch das Anwenden automatischer Ränder auf den inneren Container in den linken und rechten Boxen wird die Position automatisch so angepasst, dass sie in der Mitte zentriert ist item.

Hier ist der Code, der diese Technik demonstriert:

.container {
  display: flex;
}

.box {
  flex: 1;
  display: flex;
  justify-content: center;
}

.box:first-child > div {
  margin-right: auto;
}

.box:last-child > div {
  margin-left: auto;
}

/* non-essential */
.box {
  align-items: center;
  height: 40px;
}

.inner {
  background: pink;
  border: 1px solid deeppink;
  padding: 0 5px;
}

p {
  text-align: center;
  margin: 5px 0 0 0;
}

In diesem Code ist der Container als Flexbox festgelegt und die Boxen sind Flex-Elemente mit einem Flex-Verhältnis von 1. Jede Box verwendet eine verschachtelte Flexbox, um ihren Inhalt zu zentrieren.

Der wichtigste Schritt besteht darin, die automatischen Ränder auf den inneren Container in der ersten und letzten Box festzulegen. Für die linke Seite margin-right: auto; passt den Abstand rechts vom Element automatisch an, während margin-left: auto; macht dasselbe auf der linken Seite. Dadurch wird sichergestellt, dass die zentrierte Box unabhängig von der Breite der Seitenboxen zentriert bleibt.

Mit diesem Ansatz können Sie eine echte Zentrierung des Mittelelements erreichen, selbst wenn die Seitenelemente unterschiedliche Breiten haben.

Das obige ist der detaillierte Inhalt vonWie kann ich einen mittleren Artikel in einem Flexbox-Layout mit ungleichmäßig großen Seitenartikeln zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!