Wie kann die Breite von Flex-Elementen durch den Inhalt und nicht durch den übergeordneten Container bestimmt werden?

So sorgen Sie dafür, dass Flex-Elemente die Inhaltsbreite statt der übergeordneten Breite einnehmen

Flexbox bietet eine praktische Möglichkeit, Elemente anzuordnen. Standardmäßig erstrecken sich Flex-Elemente jedoch bis zur Breite ihres übergeordneten Containers. Dieses Verhalten ist möglicherweise nicht immer wünschenswert.

Problem:

Sie haben einen Flex-Container mit einem untergeordneten Ankerelement (). Wie können Sie dafür sorgen, dass das untergeordnete Element „inline“ erscheint, wobei seine Breite durch seinen Inhalt bestimmt wird, anstatt es auf die volle Breite des übergeordneten Elements zu erweitern?

Fehlgeschlagene Versuche:

Festlegen der Die Anzeigeeigenschaft des untergeordneten Elements von inline-flex funktioniert nicht Arbeit.

Lösung:

Verwenden Sie die folgenden Strategien:

1. Verwenden Sie align-items: flex-start auf dem Container:

Dies legt die Ausrichtung aller Flex-Elemente vertikal nach oben fest. Es überschreibt die Standardausrichtung „Strecken“ und verhindert, dass Elemente auf die volle übergeordnete Breite erweitert werden.

2. Verwenden Sie align-self: flex-start für das Flex-Element:

Dies legt die Ausrichtung des spezifischen Flex-Elements nach oben fest und steuert seine eigene Ausrichtung unabhängig vom anderen Flex items.

Beispiel:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

a {
  padding: 10px 40px;
  background: pink;
}

Erklärung:

Durch Verwendung von align-items: Flex-Start oder align -self: Flex-Start, Sie sagen effektiv, dass die relevanten Flex-Elemente entlang der Querachse (vertikal) an der Oberseite des Containers ausgerichtet werden sollen. und sollte nicht auf die volle Breite des übergeordneten Elements erweitert werden. Dadurch kann die Breite des Artikels anhand seines Inhalts bestimmt werden, wodurch der gewünschte „Inline“-Effekt erzielt wird.

Das obige ist der detaillierte Inhalt vonWie kann die Breite von Flex-Elementen durch den Inhalt und nicht durch den übergeordneten Container bestimmt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!