Wie kann ich Flexbox-Elemente proportional zu ihrer Originalgröße vergrößern lassen?

Flex-Grow-Elemente basierend auf der Originalgröße erweitern lassen

Beim Stylen von Elementen mit Flexbox ist es wünschenswert, den verbleibenden Platz im Behälter auf die Elemente zu verteilen. Standardmäßig weist Flex-Grow jedoch allen Elementen die gleiche Breite zu, unabhängig von ihrer ursprünglichen Größe. Um diese Ungleichheit beizubehalten, sollten Sie erwägen, Flex-Grow auf „Auto“ statt auf „1“ zu setzen.

Erklärung

Flex-Grow funktioniert basierend auf zwei Parametern: verfügbarer freier Speicherplatz und Flex-Basis. Unter freiem Speicherplatz versteht man den verbleibenden Platz im Container, der auf die Flex-Elemente verteilt werden kann. Flex-Basis bestimmt die anfängliche Größe jedes Artikels vor der Verteilung.

Absolute Größenbestimmung (Flex: 1):

• Wenn Flex-Basis auf 0 gesetzt ist Flex-Grow behandelt den gesamten verfügbaren Platz als freien Platz.
• Dies führt zu einer proportional gleichen Größe für alle Elemente, unabhängig von ihrem Original Inhalt.

Relative Größe (Flex: Auto):

• Wenn Flex-Basis Auto ist (Standardeinstellung), wird Flex-Grow berücksichtigt Berücksichtigen Sie die Inhaltsgröße jedes Elements.
• Nur ​​der verbleibende Platz im Container wird dann proportional basierend auf dem Flex-Wachstum verteilt Wert.

Beispiel:

Betrachten Sie drei Schaltflächen mit unterschiedlichen Breiten. Wir möchten, dass sie die verbleibende Breite des Containers ausfüllen und dabei jeweils ihre proportionale Größe beibehalten.

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: auto;     // Relative sizing to maintain original proportions
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

Wenn Sie „Flex-Grow“ auf „Auto“ setzen, werden die Schaltflächen von ihrer aktuellen Größe proportional vergrößert und füllen dabei den verfügbaren Platz aus Beibehaltung ihrer anfänglichen Größenunterschiede.

Das obige ist der detaillierte Inhalt vonWie kann ich Flexbox-Elemente proportional zu ihrer Originalgröße vergrößern lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!