Wie zentriere ich ein Flex-Element innerhalb eines Containers, wenn es von anderen Flex-Elementen umgeben ist?

Flex-Element im Container zentrieren, wenn es von anderen Flex-Elementen umgeben ist

Zum Zentrieren eines Flex-Elements innerhalb eines Containers, wenn es von anderen Flex-Elementen umgeben ist Beachten Sie Folgendes:

Konventionelle Methoden

• Verwendung von justify-content und margin: auto: Wenn die Gesamtlänge von gleich ist Flex-Elemente auf beiden Seiten des zentrierten Elements können diese Eigenschaften effektiv ausrichten.

Alternativer Ansatz

• Eindämmung und Ausgleich der Länge : Wickeln Sie den zentrierten Artikel in einen separaten Flexbehälter und stellen Sie sicher, dass die Gesamtlänge der Geschwister-Flexartikel auf beiden Seiten gleich ist. Dadurch wird das zentrierte Element gezwungen, den verbleibenden Platz einzunehmen und sich an der Mitte auszurichten.

Beispielcode

Im folgenden Beispiel wird h2 korrekt zentriert Der alternative Ansatz stellt die gleiche Gesamtlänge der Span-Elemente auf beiden Seiten sicher.

HTML:

<code class="html"><div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
  <h2 id="I-m-an-h">I'm an h2</h2>
  <div>
    <span>I'm span 4</span>
    <span>I'm span 5</span>
    <span>I'm span 6</span>
  </div>
</div></code>

CSS:

<code class="css">.container {
  align-items: center;
  display: flex;
  justify-content: center;
  border: 1px solid red;
}

.container div {
  flex: 1 1 auto;
  text-align: center;
}

h2 {
  flex: 0 0 auto;
  margin: auto;
}</code>

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Flex-Element innerhalb eines Containers, wenn es von anderen Flex-Elementen umgeben ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!