Warum zentriert „justify-content: center“ Text nicht, wenn er in einen Flex-Container eingeschlossen wird?

Text nicht zentriert mit justify-content: center

Dieses Problem tritt auf, wenn der Inhalt in einem Flex-Container übermäßig lang wird, was zu einem Umbruch führt . Während der Inhalt mit justify-content:center horizontal zentriert wird, wird die Ausrichtung beim Umbrechen gestört.

Die drei Ebenen in Flexbox verstehen

Eine Flex-Container-Struktur besteht aus drei Ebenen:

• Container
• Element
• Inhalt

Jede Ebene stellt ein unabhängiges Element dar.

Begründung in Flex-Containern

justify-content steuert die Ausrichtung von Flex-Elementen innerhalb des Containers, hat jedoch keinen direkten Einfluss auf die untergeordneten Elemente des Elements (in diesem Fall den Text).

Wenn die Wenn die Breite des Flex-Containers die Breite des Inhalts überschreitet, wird das Flex-Element verkleinert, um es an den Inhalt anzupassen (shrink-to-fit) und horizontal zentriert. Der Inhalt innerhalb des Elements folgt automatisch dieser Ausrichtung.

Ausrichtung, wenn der Inhalt den Flex-Container überschreitet

Wenn der Inhalt jedoch breiter als der Flex-Container wird, kann das Flex-Element dies tun nicht mehr ausrichten. Da das Element die gesamte Containerbreite einnimmt, ist nicht genügend freier Platz für die Ausrichtung vorhanden.

Textausrichtung

Trotz der Fehlausrichtung wurde text-align:center nie angewendet standardmäßig der Text. Um es direkt zu zentrieren, muss text-align: center explizit entweder dem Flex-Element oder dem Flex-Container hinzugefügt werden.

Codebeispiel

<code class="css">article {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center {
  text-align: center;
}</code>

<code class="html"><article>
  <p>some long text here</p>
</article>

<article>
  <p class="center">some long text here</p>
</article></code>

Das obige ist der detaillierte Inhalt vonWarum zentriert „justify-content: center“ Text nicht, wenn er in einen Flex-Container eingeschlossen wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!