Wie kann verhindert werden, dass sich flexible Artikel auf die Containerbreite ausdehnen?

So erzwingen Sie, dass Flex-Elemente in den Inhalt passen, nicht in die Containerbreite.

In Flex-Layouts werden Elemente auf natürliche Weise gestreckt, um die Breite ihres übergeordneten Elements auszufüllen Container. Dies kann unerwünscht sein, wenn untergeordnete Elemente nur ihren Inhalt umschließen sollen. So erzwingen Sie dieses Verhalten:

Lösung mit align-items/align-self

Setzen Sie align-items: flex-start auf dem Container oder align-self : Flex-Start für die Flex-Elemente. Dies überschreibt die Standardeinstellung „align-items: stretch“, die dazu führt, dass Elemente erweitert werden, um den horizontalen Raum des Containers auszufüllen, wenn die Flex-Richtung „Spalte“ ist.

So funktioniert es

Durch die Einstellung von align-items: flex-start erzwingen Sie, dass sich Elemente an der Startkante des Containers ausrichten. Da die Spaltenrichtung festgelegt ist, ist die Startkante die linke Kante. Dies zwingt Elemente, nur so breit wie ihr Inhalt zu bleiben.

Beispiel:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
a {
  padding: 10px 40px;
  background: pink;
}

Verwandte Konzepte

• Querachse: Die Achse senkrecht zur primären Layoutachse (horizontal in der Spalte). Layouts).
• align-items: Richtet flexible Elemente entlang der Querachse aus.
• align-self: Ähnlich wie align-items, aber spezifisch für einzelne Flex-Artikel.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass sich flexible Artikel auf die Containerbreite ausdehnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!