Wrap-Kampf

Rap-Battle (oder Battle-Rap ) ist eine Form des Rap-Auftritts, bei dem zwei oder mehr Rapper gegeneinander singen (im Allgemeinen inklusive einiger Beleidigungen/Angriffe). Der heutige Comic spielt mit den Homophonen Rap und Wrap, um einen albernen Witz mit Flexbox und der flex-wrapEigenschaft zu machen .

Ein Flex-Container ordnet den Inhalt standardmäßig in einer einzigen Zeile an. Das mag in Ordnung sein, aber wenn die Größe der Gegenstände den Behälter überschreitet, werden sie gequetscht oder laufen über. Stattdessen möchten wir den Inhalt möglicherweise in mehrere Zeilen unterteilen. Hier flex-wrapkommt es ins Spiel.

Diese Eigenschaft definiert, ob ein Flex-Container einzeilig oder mehrzeilig ist (abhängig von der Menge und Größe der flexiblen Artikel), und im Fall von mehrzeiligen Artikeln definiert sie, wie die Artikel nach dem Verpacken gestapelt werden.

flex-wraphat drei Hauptwerte:

• nowrap: Die Artikel werden nicht verpackt; Stattdessen passen sie ihre Größe an oder überlaufen das übergeordnete Element. (Dies ist der Standardwert.)
• wrap: Die Gegenstände werden umwickelt, anstatt den flexiblen Behälter zu überlaufen. Sie werden vom Queranfang bis zum Querende gestapelt.
• wrap-reverse: Die Gegenstände werden umwickelt, anstatt den flexiblen Behälter zu überlaufen. Sie werden vom Cross-End zum Cross-Start gestapelt.

Schauen wir uns ein Beispiel mit einem Flex-Container mit 5 Artikeln mit definierter Breite an. Standardmäßig flex-wrapist der Wert von „nowrap“, sodass die Flex-Elemente den Container überlaufen (ich habe ihn als Bild eingefügt, um den lästigen horizontalen Überlauf zu vermeiden, der dadurch entstehen würde):

Wenn wir nun den Code ändern, um den Wert „wrap“ für festzulegen flex-wrap, werden die Flex-Elemente stattdessen in eine neue Zeile umgebrochen, wenn sie den Container überlaufen würden (Live-Demo):

Wenn wir aber flex-wrap„wrap-reverse“ einstellen, dann ist die Richtung des Wrappings umgekehrt: Anstatt in eine neue Reihe zu gelangen, schieben die umwickelten Elemente die anderen in eine neue Reihe.

Ein letztes Beispiel mit der flex-directionEinstellung „Spalte“. In diesem Fall werden die Elemente vertikal in Spalten organisiert. Wenn sie also umbrochen werden, erfolgt dies in Spalten statt in Zeilen:

Ich hoffe, dass diese Beispiele nützlich waren und dass Ihnen der heutige Comic gefallen hat . Erfahren Sie mehr über flex-wrapdie folgenden Quellen:

• MDN-Artikel über Flex-Wrap
• CSS-Tricks: Eine vollständige Anleitung zu Flexbox
• Josh W. Comeau: Ein interaktiver Leitfaden für Flexbox