Wie kann ich einen Flex-Artikel in einem Container mit anderen Flex-Artikeln zentrieren?

Ein Flex-Element zentral in einem Container mit zusätzlichen Flex-Elementen ausrichten

Flex-Ausrichtungseigenschaften weisen freien Platz innerhalb eines Containers zu. Daher ist die automatische Zentrierung eines flexiblen Elements, das von anderen umgeben ist, nicht möglich, es sei denn, die kombinierte Breite der benachbarten Elemente entspricht der Breite des Containers.

Betrachten Sie das zweite bereitgestellte Beispiel. Die Gesamtbreite der Spannelemente ist auf beiden Seiten des h2-Elements gleich. Dadurch ist der h2 perfekt im Behälter zentriert.

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

p {
  text-align: center;
}

p > span {
  background-color: aqua;
  padding: 5px;
}</code>

<code class="html"><div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
  <h2>I'm an h2</h2>
  <span>I'm span 4</span>
  <span>I'm span 5</span>
  <span>I'm span 6</span>
</div>
<p><span>TRUE CENTER</span></p></code>

Das obige ist der detaillierte Inhalt vonWie kann ich einen Flex-Artikel in einem Container mit anderen Flex-Artikeln zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!