Innerhalb von Flexbox können die Eigenschaften Flex-Grow-shrink & -foundation genutzt werden, um zu bestimmen, ob Komponenten größer werden können, ob sie kleiner werden können und welche erste Größe als Fundament verwendet wird. Mit Flexbox können Sie reaktionsfähige Designs, die keine Netzwerkabfragen erfordern, selbst erstellen. Da eigenständige Komponenten entwickelt werden können, die nicht auf die Größe des Viewports, sondern auf den verfügbaren Platz der übergeordneten Komponente reagieren, wird dies in einigen Anwendungsfällen derzeit berücksichtigt.

Wenn Sie ein Responsive Design möchten ohne sich die ganze Umsetzungsarbeit zu machen, dann können Sie auch eine Webseite mieten. Diese Webseiten sind bereits SEO optimiert und Sie können direkt mit der Umsetzung Ihres Projekts starten.

Spalten automatisch umbrechen

Stellen wir uns zum Beispiel für diesen Artikel eine“Kartenkomponente“ vor, die einen Bildbereich und einen Textbereich umfasst. Das Bild sollte neben dem Text angezeigt werden, wenn die Komponente viel Platz hat – wenn der Platz begrenzt ist, ist das Bild über dem Text.

Der Außencontainer (.card) ist eine Flexbox, d.h. standardmäßig werden die beiden enthaltenen Child-Elemente nebeneinander und in exakt gleicher Höhe angezeigt.

Die Kind-Elemente selbst können durch den Flex-Grow kleiner werden: 1; größer und dank Flex-Shrink: 1; und erhalten einen Startwert für die Breite von 280 Pixel. Dieser Wert ist Ihr“Haltepunkt“ dieses Teils. In dem Moment, in dem eine der beiden Spalten weniger als 280 Pixel hat, gehen die Komponenten untereinander vor und brechen um. Da sie wachsen und schrumpfen dürfen, sind sie in dieser Anordnung auch im Durchmesser flexibel.

Umwickeln mehrerer Elemente

Das Kartenteil kann mehrfach nebeneinander verwendet werden. Das Prinzip aus dem obigen Beispiel wird dann auf einer höheren Ebene wiederholt.

Wenn es dreimal verwendet wird, kann man einen interessanten Effekt sehen: Die nächste Karte gleitet am Zwischenmaß quer unter zwei weitere und nimmt – da viel Platz vorhanden ist – automatisch die Darstellung zusammen mit dem linken Bild und dem rechten Text vor.

Wenn es viele Elemente gibt, gleitet ein Element in Zwischenschritten quer unter den anderen Personen hindurch.

Seitenumbruch ohne Zwischenschritt

Der Zwischenschritt kann nun offensichtlich als recht unattraktiv empfunden werden – basierend auf dem Design dieses Projekts. Um den Schritt zu überspringen, ist ein Hinweis, der im Artikel The Flexbox Holy Albatross beschrieben wurde. Die Anpassung führt dazu, dass die Dreikartenelemente entweder nebeneinander oder untereinander ausgestellt werden. Sie strukturieren sich neu und reagieren auf unterschiedliche Raumverhältnisse.

Die drei Karten werden entweder untereinander oder nebeneinander ausgestellt. Sie strukturieren sich separat um und reagieren auf unterschiedliche inhaltliche Platzverhältnisse.

Der Trick funktioniert mit einer Berechnung des Flex-Basiswertes, der zu extrem kleinen Werten bei beengten Platzverhältnissen und extrem großen Werten bei beengten Platzverhältnissen beiträgt. Dadurch wird das Teil in seine beiden Extrembedingungen gezwungen und die Stufe verschwindet. Eine umfassende Erklärung des Tricks finden Sie hier.