Wie kann ich flexible Artikel proportional zu ihrer Originalgröße erweitern lassen?

Flexible Elemente proportional zu ihrer ursprünglichen Größe erweitern

Um sicherzustellen, dass sich flexible Elemente gleichmäßig ausdehnen und gleichzeitig ihre relative Breite beibehalten, passen Sie die Flexibilität an: 1 beugen: automatisch. Dieser Schalter ändert die Größenberechnung unter Berücksichtigung der Inhaltsgröße.

Flex-grow und Flex-basis verstehen

Flex-grow erhöht, wie der Name schon sagt, die Größe eines Elements basierend auf seinem definierten Wert und dem verfügbaren freien Speicherplatz. Es ist jedoch wichtig, die Rolle der Flex-Basis zu berücksichtigen, die die anfängliche Größe eines Artikels bestimmt.

Relative vs. absolute Größenbestimmung

Wenn die Flex-Basis ist Bei einer Einstellung auf 0 behandelt Flex-Grow den gesamten Speicherplatz als freien Speicherplatz für die Verteilung, was zu einer absoluten Größenanpassung führt, bei der die Elemente unabhängig davon die gleiche Breite haben Inhalt.

Umgekehrt, wenn „flex-basis“ auf „auto“ eingestellt ist (Standardeinstellung), wird die Inhaltsgröße vor der Berechnung des freien Speicherplatzes berücksichtigt. Dies ermöglicht eine relative Größenanpassung, bei der nur zusätzlicher Platz proportional verteilt wird.

Aufschlüsselung der Flex-Werte

• flex: 1: Abkürzung für flex-grow: 1 ( absolute Größe)
• flex-grow: 1: Relative Größe, unter Berücksichtigung sowohl der Inhaltsgröße als auch verfügbarer Platz
• Flex: Auto: Äquivalent zu Flex-Grow: 1 / Flex-Shrink: 1 / Flex-Basis: Auto, was auch eine relative Größenanpassung ist

Durch Verwendung von Flex: Automatisch werden die Schaltflächen vergrößert, um die verbleibende Breite der Zeile auszufüllen und gleichzeitig ihr ursprüngliches Größenverhältnis beizubehalten. Dadurch wird sichergestellt, dass der breiteste Knopf auch im erweiterten Zustand breiter bleibt als die anderen.

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