Wie kann ich dafür sorgen, dass Flexbox-Elemente proportional zu ihrer ursprünglichen Größe erweitert werden?

Machen Sie Flex-Grow dazu, Elemente basierend auf ihrer Originalgröße zu erweitern

Das Problem verstehen

In Ihrer Situation haben Sie das getan Mehrere Tasten in einer Reihe mithilfe von Flexbox angeordnet. Sie möchten, dass die Breite dieser Schaltflächen proportional zunimmt, um den verbleibenden Zeilenbereich auszufüllen und gleichzeitig ihre ursprünglichen Breitenunterschiede beizubehalten. Allerdings führt die Einstellung von Flex: 1 für jede Taste dazu, dass alle Tasten die gleiche Breite haben.

Lösung: Wechseln Sie zu Flex: Auto

Der Schlüssel zum Erreichen Ihrer Wünsche Das Ergebnis liegt in der Wahl des richtigen Wertes für Flex-Grow. Anstelle von Flex: 1 sollten Sie Flex: Auto verwenden.

So funktioniert Flex-Grow

Flex-Grow verteilt freien Platz im Container auf Flex-Elemente basierend auf zwei Faktoren:

• Freier Platz:Der ungenutzte Platz im Zeile/Spalte.
• Flex-Basis: Die anfängliche Größe des Flex-Elements vor Berücksichtigung von Flex-Grow.

Erklärung

Wenn Sie „flex: 1“ verwenden, setzen Sie „flex-basis“ auf 0 und „flex-grow“ auf 1. Das bedeutet, dass Flexbox den gesamten Platz in der Zeile als frei behandelt Speicherplatz, was zu einer gleichmäßigen Verteilung auf alle Elemente führt, unabhängig von ihrem Inhalt.

Andererseits setzt „flex: auto“ „flex-basis“ auf „auto“, wodurch die Größe des Inhalts des Elements berücksichtigt wird, bevor der freie Speicherplatz verteilt wird. Dadurch wird sichergestellt, dass Elemente ihre ursprünglichen Größenunterschiede beibehalten und dennoch den verbleibenden Zeilenraum ausfüllen.

Beispiel

Ersetzen Sie in Ihrem Code jeweils „flex: 1“ durch „flex: auto“. Schaltfläche:

.button {
  flex: auto;  // Change from flex: 1
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

Dadurch können die Schaltflächen basierend auf ihrer ursprünglichen Breite erweitert werden, sodass Ihre Anforderungen erfüllt werden.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass Flexbox-Elemente proportional zu ihrer ursprünglichen Größe erweitert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!