CSS Flex-Layout

QR-Code mit Objekt-Grafik

Zielgruppe sind StudentInnen und ambitionierte Informatik-Amateure
Grundkenntnisse der Informatik sind vorteilhaft. Das Verständnis der Details erfordert Kenntnisse von HTML und CSS.



Live Flex-Demonstration


Das Beispiel zeigt einen 'Container' (Behälter, rot) mit 5 darin enthaltenen 'Boxen' (Items, blau) verschiedener Größe. Mit Flex kann man das Layout dynamisch an den verfügbaren Platz anpassen.

Verwenden sie die grün unterlegten Bedienungs-Elemente, um einige der vielen Layout-Varianten auszuwählen, die mit CSS-Flex möglich sind.


Box‑1

Diese Box enthält
nur ein wenig Text.

Box‑2

Text und ein
kleines Icon

Box‑3

Diese Box enthält einen längeren Text.
Beobachten sie Größe und Position.

Box‑4

Winzig

Box‑5

Die letzte Box
dieses Containers


Mit Version CSS‑3 wurde die Flex-Technologie eingeführt. Damit kann ein Browser die Informations-Elemente (Boxen) abhängig von Größe und Geometrie des Bildschirms oder des Fensters selbständig anordnen.

Größe und Position der einzelnen Boxen werden nicht mehr einzeln und detailliert angegeben, sondern automatisch an den verfügbaren Platz angepasst. Das erlaubt nicht nur Flexibilität sondern spart auch sehr viel umständliche Programmierung.

Die Flex-Methoden werden bisher (auch von diesem Web) noch nicht allgemein angewendet. Das wird sich bald ändern, denn alle modernen Browser unterstützen derzeit bereits die Flex-Technologie.

Flex Layout-Beispiele


Container und Boxen wurden zur besseren Übersicht mit Rändern und Abständen formatiert.

Veraltete Browser können kein flexibles Layout anzeigen. Professionelle Webs leiten in diesem Fall meist auf ein starres Layout um. Hier wird absichtlich nicht umgeleitet, damit man das Verhalten des verwendeten Browsers Live beobachten kann.


Layout-Variante A:
Der Container wird von links nach rechts befüllt. Die Boxen können unterschiedliche Breite haben, ihre Höhe wird jedoch einheitlich formatiert.
Box-1
Box-2
Box mit Nr.3


Layout-Variante B:
Die Boxen werden im Container zentriert. Unabhängig davon könnte man auch die Inhalte der Boxen zentrieren.
Box-1
Box-2
Box mit Nr.3


Layout-Variante C:
Der Container wird von rechts nach links befüllt.
Die Reihenfolge der Boxen (von 1 bis 3) bleibt jedoch erhalten.
Box-1
Box-2
Box mit Nr.3


Layout-Variante D:
Der Container wird von links nach rechts befüllt. Für alle Boxen wird die gleiche Mindest-Breite festgelegt.
Box-1
Box-2
Box mit Nr.3


Layout-Variante E:
Die Boxen werden zentriert, der verbleibende freie Platz dazwischen aufgeteilt.
Box-1
Box-2
Box mit Nr.3


Layout-Variante F:
Die Boxen werden zentriert, der freie Platz wird um alle Boxen herum aufgeteilt.
Box-1
Box-2
Box mit Nr.3


Layout-Variante G:
Der gesamte Platz wird ohne Zwischenräume unter den Boxen aufgeteilt. Man könnte einzelnen Boxen auch die doppelte oder dreifache relative Breite zuweisen.
Box-1
Box-2
Box mit Nr.3

Live Flex-Test

◀  Links ist eine komplette ↗ Mini-Webseite eingebettet, mit der man die Flex-Fähigkeiten eines Browsers testen kann.

Die Live-Informationen werden mit einem kleinen Programm in der Programmiersprache → Javascript ermittelt: Kennung des Browsers, Breite des Fensters in Bildpunkten (Pixeln), Position der beiden rot umrandeten Test-Boxen, Diagnose auf Grundlage der beiden Positionen.

Danach folgen 2 mit Flex formatierte Boxen, die als Test-Objekte dienen.

Mit diesem Link oder QR-Code wird die ↗ Testseite in einem eigenen Browser-Tab geöffnet.

Der ↗ Original Quelltext ist nur für EntwicklerInnen interessant: Er enthält (wenig) → HTML, die CSS-Regeln zur Flex-Formatierung der beiden rot umrandeten Boxen und das Javascript-Programm zur Live-Analyse. Man kann den Quelltext in einer Datei *.html am eigenen Arbeits-PC speichern und verwenden.
Flex-Test


<div class="container">
<article class="box">
Text...
</article>
<article class="box">
Text...
</article>
</div>



.container{
display:flex; flex-direction:row;
}
.box{
flex-grow:1;
}

Flex Programmierung


Alle Beispiele verwenden 1 Container und 3 darin enthaltene Boxen. Alle 4 Elemente sind als HTML <div>-Elemente ausgeführt.

Der Text-Inhalt der 3.Box ist absichtlich etwas länger, damit man sieht, wie Flex ihre Größe formatiert.


Container

Auf den Container wird die klassische CSS-Eigenschaft display mit dem neuen Wert flex angewendet.

Die neue CSS-Eigenschaft flex‑direction steuert die Richtung der Haupt-Achse. Der Wert row (Reihe) ordnet primär in horizontaler Richtung. Alternativ könnte man mit dem Wert column eine vertikale Haupt-Achse vorgeben.

Die neue CSS-Eigenschaft flex‑wrap bewirkt einen Umbruch (neue Boxen-Zeile), wenn in einer Zeile zu wenig Platz ist.

Vereinfachte CSS-Syntax des Containers (ohne Rand und Hintergrund):
<style type="text/css" media="screen">
.container {display:flex; flex‑direction:row; flex‑wrap:wrap;}
</style>


Variante A:  Von links nach rechts

Die CSS-Eigenschaft justify‑content des Container-Elements bestimmt die Richtung der Anordnung - In diesem Fall: Vom Anfang (links) zum Ende (rechts).

Ergebnis:
Die Breite der Boxen richtet sich (nur) nach dem Inhalt und ist daher variabel, ihre Höhe wird jedoch einheitlich formatiert.
Die Boxen werden ohne Zwischenraum von links nach rechts angeordnet.
Box-1
Box-2
Box mit Nr.3
<div class="container" style="justify‑content:flex‑start">
<div>Box-1</div>
<div>Box-2</div>
<div>Box mit Nr.3</div>
</div>


Variante C:  Zentriert

Die CSS-Eigenschaft justify‑content des Container-Elements bestimmt die Richtung der Anordnung - In diesem Fall: Im Container zentriert.

Ergebnis:
Die Breite der Boxen richtet sich (nur) nach dem Inhalt und ist daher variabel.
Die Boxen werden ohne Zwischenraum zentriert angeordnet.
Box-1
Box-2
Box mit Nr.3
<div class="container" style="justify‑content:center">
<div>Box-1</div>
<div>Box-2</div>
<div>Box mit Nr.3</div>
</div>


Variante D:  Von rechts nach links

Die CSS-Eigenschaft justify‑content des Container-Elements bestimmt die Richtung der Anordnung - In diesem Fall: Vom Ende (rechts) zum Anfang (links).

Ergebnis:
Die Breite der Boxen richtet sich (nur) nach dem Inhalt und ist daher variabel.
Die Boxen werden ohne Zwischenraum von rechts nach links angeordnet. Das betrifft jedoch nur das Layout, nicht die Reihenfolge der Boxen.
Box-1
Box-2
Box mit Nr.3
<div class="container" style="justify‑content:flex‑end">
<div>Box-1</div>
<div>Box-2</div>
<div>Box mit Nr.3</div>
</div>


Variante B:  Minimale Größe

Für die CSS-Klasse .box3 wird eine Mindest-Breite von 20% (des übergeordneten Container-Elements) festgelegt. Alle 3 Boxen werden mit dieser Klasse formatiert.

Die CSS-Eigenschaft justify‑content des Container-Elements bestimmt die Richtung der Anordnung - In diesem Fall: Von links nach rechts.

Ergebnis:
Die Boxen werden in der festgelegten minimalen Größe formatiert. Größere Boxen mit mehr Inhalt wären von dieser Regel nichjt betroffen.
Die Boxen werden ohne Zwischenraum von links nach rechts angeordnet.
Box-1
Box-2
Box mit Nr.3
<style> .box3 {min-width:20%;} </style>
<div class="container" style="justify‑content:flex‑start">
<div class="box3">Box-1</div>
<div class="box3">Box-2</div>
<div class="box3">Box mit Nr.3</div>
</div>


Variante E:  Zentriert, Zwischenraum aufgeteilt

Die CSS-Eigenschaft justify‑content des Container-Elements bestimmt das Layout. In diesem Fall werden die Boxen und der Zwischenraum gleichmäßig aufgeteilt.

Ergebnis:
Die Größe der Boxen richtet sich (nur) nach dem Inhalt und ist daher variabel.
Die Boxen werden gleichmäßig im verfügbaren Raum verteilt.
Box-1
Box-2
Box mit Nr.3
<div class="container" style="justify‑content:space‑between">
<div>Box-1</div>
<div>Box-2</div>
<div>Box mit Nr.3</div>
</div>


Variante F:  Zentriert, Zwischenraum um die Boxen aufgeteilt

Die CSS-Eigenschaft justify‑content des Container-Elements bestimmt das Layout. In diesem Fall werden die Boxen und der Zwischenraum gleichmäßig aufgeteilt.

Ergebnis:
Die Größe der Boxen richtet sich (nur) nach dem Inhalt und ist daher variabel.
Die Boxen werden gleichmäßig im verfügbaren Raum verteilt. Der Zwischenraum wird 'um die Boxen herum' verteilt, d.h. auch vor der ersten und nach der letzten Box.
Box-1
Box-2
Box mit Nr.3
<div class="container" style="justify‑content:space‑around">
<div>Box-1</div>
<div>Box-2</div>
<div>Box mit Nr.3</div>
</div>


Variante G:  Aufteilung ohne Zwischenraum

Die CSS-Klasse .box2 erhält die Eigenschaft flex‑grow . Der Wert 1 bestimmt, dass alle Elemente dieser Klasse mit gleicher Breite formatiert werden.

Ergebnis:
Alle Boxen werden in gleicher (maximaler) Größe formatiert.
Box-1
Box-2
Box mit Nr.3
<style> .box2 {flex‑grow:1;} </style>
<div class="container">
<div class="box2">Box-1</div>
<div class="box2">Box-2</div>
<div class="box2">Box mit Nr.3</div>
</div>

Webseite mit Flex-Layout


Hier ist eine komplette eigenständige ↗ Mini-Webseite (mit grauem Rand) eingebettet, deren Breite sich Live verändern lässt:



HTML-Quelltext der Demo-Webseite (vereinfacht):
<div class="page">
<header class="hdr">
<h1>Kopf-Teil:</h1>
</header>
<article class="cntr">
<h1>Zentrum</h1>
</article>
<aside class="asd asda">
<h1>Seite A</h1>
</aside>
<aside class="asd asdb">
<h1>Seite B</h1>
</aside>
<footer class="ftr">
<h1>Fuß-Teil</h1>
</footer>
</div>



Allgemeine CSS-Regeln der Demo-Webseite (vereinfacht):
<style type="text/css">
.page {display:flex; flex‑direction:row; flex‑wrap:wrap;}
.page > * {flex‑basis:100%; flex‑grow:1; flex‑shrink:1;}
.ftr{order:4;}
</style>

Dieses Layout wird angewendet, wenn keine weiteren speziellen CSS-Regeln zutreffen (z.B. bei einem kleinen Smartphone-Fenster):
Jede Box wird mit 100% Breite in einer eigenen Layout-Zeile angeordnet. Die Reihenfolge der Boxen entspricht jener im Quelltext.


Bedingte CSS-Regeln der Demo-Webseite (vereinfacht):

@media (min‑width:400px) {
.cntr{flex‑basis:100%; flex‑grow:2; order:1;}
.asd{flex‑basis:0px;} .asda{order:2;} .asdb{order:3;}
}
@media (min‑width:600px) {
.cntr{flex‑basis:0px; flex‑grow:2; order:2;}
.asda{order:1;} .asdb{order:3;}
}
@media (min‑width:800px) { .cntr{flex‑grow:3;} }

Die CSS-Eigenschaft flex‑grow bezeichnet die relative Breite bei Vergrößerung, die Eigenschaft order die Reihenfolge.


Programmierung

Der Browser soll das Layout automatisch an den verfügbaren Platz anpassen.
Die Flex-Anweisungen sollen die allgemeinen Richtlinien zur Gestaltung wiedergeben.
Es werden so wenige spezielle CSS- und HTML)-Anweisungen angegeben wie möglich.



Die oben angeführten Details sind zur Vereinfachung gekürzt. Interessierte EntqicklerInnen können den Quelltext mit jedem guten Browser / RechtsKlick anzeigen.
Alternativ kann man den ↗ Original Quelltext mit diesem Link anzeigen und studieren.
Die Flex-Demo-Webseite enthält alle verwendeten Resourcen, man kann daher den Quelltext in einer Datei *.html am eigenen Arbeits-PC speichern und damit experimentieren.

Flex Links


W3Schools: Einige Seiten, jedoch (unüblich) nur dann verständlich, wenn man die Flex-Technik bereits beherrscht.

SelfHTML: Einige Beispiele, derzeit jedoch noch schlecht verständlich.