Flexibles Boxmodell

Für das flexible Boxmodell müssen die Boxen in einem div zusammengefasst werden. Diese div hat die Eigenschaft display: box; und für die horizontale Anordnung der Boxen box-orient: horizontal;

Wichtig ist hier die Angabe der Breite. 100% verändert die Breite der Box mit dem Browserfenster. Für diese Container muss margin und padding auf 0 gesetzt werden. Sonst gibt es Probleme mit dem Abstand zum Elternelement.

Innerhalb diese div werden dann mit weiteren div die Boxen gesetzt. Diese div ist hier mit rotem Hintergrund hinterlegt.

Bis zur entgültigen Implementierung müssen noch der Herstellerkürzel davor gesetzt werden.

Ich habe mir für horizontale Boxen und vertiale Boxen zwei Klassen definiert.

Zur besseren Darstellung ist die flexible Box mit rotem Hintergrund und mit einem Rand ausgestattet. Das wird es in der Praxis so nicht geben. Hier wird das Element nur als Container verwendet. Die Formatierung geschieht über die Boxen im Container.

Um die Auswirkung zu sehen, muss die Breite des Browserfensters verändert werden.

flexBoxContainerH flexBoxContainerV

Innerhalb des Box-Containers können die Boxen flexibel oder eine feste Breite haben.

Die Zahl bei box-flex gibt den Anteil der Box am restliche Platz an.

In diesem Beispiel ist box1 mit box-flex: 1, box2 mit box-flex: 2 und box3 als Box mit fester Breite definiert.

Wird der Text länger ist die Boxbreite zufällig.

Mit min-width kann man diese Zufälligkeit abstellen.

Allerdings hat das den Nachteil, dass bei Erreichen des min-width die Box aus dem Rahmen wandert.

CSS anzeigen

Haben die Boxen feste Größen, kann mit box-pack die Ausrichtung bestimmt werden.

Es gibt start, center, end und justify.

start (Standard) - Die Boxen werden linksbündig angeordnet (id=flexBoxPackHS).

center - Die Boxen werden zentriert (id=flexBoxPackHC).

end - Die Boxen werden rechtsbündig angeordnet (id=flexBoxPackHE).

justify- soll den Platz zwischen den Boxen aufteilen. Dies funktioniert aber noch nicht (id=flexBoxPackHJ).

CSS anzeigen

Mit box-align wird die andere Dimension der Ausrichtung bestimmt.

Ist box-orient: horizontal bestimmt box-align die vertikale Ausrichtung

Es gibt stretch, start, center, end und baseline.

stretch (Standard) - Die Boxen werden gestreckt (id=flexBoxAlignVS).

start - Die Boxen werden oben angeordnet (id=flexBoxAlignVA).

center - Die Boxen werden vertival zentriert (id=flexBoxAlignVC).

end - Die Boxen werden unten angeordnet (id=flexBoxAlignVE).

baseline - Mir ist noch nicht klar was baseline machen soll (id=flexBoxAlignVB).

CSS anzeigen

Hier ist nochmal die Flexbox aus Beispiel 1. Zusätzlich werden in der mittleren Box zwei Boxen vertikal angeordnet.

Dazu wird in die mittlere Box ein Container mit class flexBoxContainerV eingefügt. Dieser hat die Hintergrundfarbe grün.

In diesen vertikalen Container werden die Boxen 1 und 2 eingefügt.

Mit längerem Text ist auch hier die Breite zufällig.