Flexibler Multispalten Container

Die Spalten haben nur hier im Styleguide eine Hintergrundfarbe.
Hintergrundfarben sind durch Padding nicht beeinflusst und das ist auch der Grund, weshalb es so aussieht, als wenn die Spalten außerhalb des Containers liegen. Dem ist aber nicht so.
Ich (ROV) denke eher das die farbliche Hinterlegung ins hier einen besseren optischen Vorteil bietet, anstatt lange Lorem Ipsum Texte zu integrieren.

Index




Für die Ausrichtungen wurden die Bootstrap Flex Justify Klassen verwendet.

Der Fülltext auf der rechten Seite dient dazu der linken Seite genug Platz für die Ausdehnung zu bieten. Sollte der Content auf beiden Seiten identisch hoch sein, würde man keine Auswirkungen sehen.

Um Justify zu verwenden zu können, wurde per CSS Klasse "flex-column" hinzugefügt.

Zur Verdeutlichung, wie groß ein Element ist, wurde der Bodytext zusätzlich mit einer Hintergrundfarbe hinterlegt.

Bei diesen Anweisungen geht es um die Verteilung des freien Raumes. Auch wenn Ausrichtung "Oben" den Inhalt oben darstellt, ist es eher die Verteilung des freien Platzes nach unten. Mit diesem Hinweis ist es hoffentlich einfacher zu verstehen, was die einzelnen Anweisungen machen.

Ausrichtung | Oben/Links (Start)

Ausrichtung | Zentriert (Center)

Ausrichtung | Unten/Rechts (End)

Anordnung | Dazwischen (Between)

Anordnung | Rund um (Around)

Anordnung | Gleichmäßig (Evenly)




Für die Ausrichtungen wurden die Bootstrap Flex Align Items Klassen verwendet.

Zur Verdeutlichung, wie groß ein Element ist, wurde der Bodytext zusätzlich mit einer Hintergrundfarbe hinterlegt.

Baseline ist nicht als Content Element verfügbar und auch der Styleguide Test müsste dahingehend erweitert werden. Was macht diese Einstellung?

Ausrichtung | Links (Start)

Ausrichtung | Zentriert (Center)

Ausrichtung | Rechts (End)

Anordnung | Schriften auf einer Linie (Baseline)

Anordnung | Ausdehnen (Stretch)




FMC Header - Primary Button

FMC Header - Secondary Button

FMC Header - Tertiary Button

FMC Header - Quaternary Button




FMC Header - Button

FMC Header - Button

FMC Header - Button

FMC Header - Button

FMC Header - Button

FMC Header - Button

FMC Header - Button

FMC Header - Button

FMC Header - Button

FMC Header - Button

FMC Header - Button

FMC Header - Button

FMC Header - Button




Spalten Mix --- Auto - Fest - Auto

Spaltenbreite 0 bedeutet hier auto

Spalten Mix --- auto - auto - auto

Spalten Mix --- auto - 1 - auto

Spalten Mix --- auto - 2 - auto

Spalten Mix --- auto - 3 - auto

Spalten Mix --- auto - 4 - auto

Spalten Mix --- auto - 5 - auto

Spalten Mix --- auto - 6 - auto

Spalten Mix --- auto - 7 - auto

Spalten Mix --- auto - 8 - auto

Spalten Mix --- auto - 9 - auto

Spalten Mix --- auto - 10 - auto

Spalten Mix --- auto - 11 - auto

Spalten Mix --- auto - 12 - auto





Spalten Anzahl 1


Spalten Anzahl 2


Spalten Anzahl 3


Spalten Anzahl 4


Spalten Anzahl 5


Spalten Anzahl 6


Spalten Anzahl 7


Spalten Anzahl 8


Spalten Anzahl 9


Spalten Anzahl 10


Spalten Anzahl 11


Spalten Anzahl 12





Spalten Anzahl 1


Spalten Anzahl 2


Spalten Anzahl 3


Spalten Anzahl 4


Spalten Anzahl 5


Spalten Anzahl 6


Spalten Anzahl 7


Spalten Anzahl 8


Spalten Anzahl 9


Spalten Anzahl 10


Spalten Anzahl 11


Spalten Anzahl 12





Spalten Anzahl 1


Spalten Anzahl 2


Spalten Anzahl 3


Spalten Anzahl 4


Spalten Anzahl 5


Spalten Anzahl 6


Spalten Anzahl 7


Spalten Anzahl 8


Spalten Anzahl 9


Spalten Anzahl 10


Spalten Anzahl 11


Spalten Anzahl 12





Spalten Anzahl 1


Spalten Anzahl 2


Spalten Anzahl 3


Spalten Anzahl 4


Spalten Anzahl 5


Spalten Anzahl 6


Spalten Anzahl 7


Spalten Anzahl 8


Spalten Anzahl 9


Spalten Anzahl 10


Spalten Anzahl 11


Spalten Anzahl 12





Spalten Anzahl 1


Spalten Anzahl 2


Spalten Anzahl 3


Spalten Anzahl 4


Spalten Anzahl 5


Spalten Anzahl 6


Spalten Anzahl 7


Spalten Anzahl 8


Spalten Anzahl 9


Spalten Anzahl 10


Spalten Anzahl 11


Spalten Anzahl 12





Spalten Anzahl 1


Spalten Anzahl 2


Spalten Anzahl 3


Spalten Anzahl 4


Spalten Anzahl 5


Spalten Anzahl 6


Spalten Anzahl 7


Spalten Anzahl 8


Spalten Anzahl 9


Spalten Anzahl 10


Spalten Anzahl 11


Spalten Anzahl 12





Spalten Anzahl 1


Spalten Anzahl 2


Spalten Anzahl 3


Spalten Anzahl 4


Spalten Anzahl 5


Spalten Anzahl 6


Spalten Anzahl 7


Spalten Anzahl 8


Spalten Anzahl 9


Spalten Anzahl 10


Spalten Anzahl 11


Spalten Anzahl 12





Spalten Anzahl 1


Spalten Anzahl 2


Spalten Anzahl 3


Spalten Anzahl 4


Spalten Anzahl 5


Spalten Anzahl 6


Spalten Anzahl 7


Spalten Anzahl 8


Spalten Anzahl 9


Spalten Anzahl 10


Spalten Anzahl 11


Spalten Anzahl 12





Spalten Anzahl 1


Spalten Anzahl 2


Spalten Anzahl 3


Spalten Anzahl 4


Spalten Anzahl 5


Spalten Anzahl 6


Spalten Anzahl 7


Spalten Anzahl 8


Spalten Anzahl 9


Spalten Anzahl 10


Spalten Anzahl 11


Spalten Anzahl 12





Spalten Anzahl 1


Spalten Anzahl 2


Spalten Anzahl 3


Spalten Anzahl 4


Spalten Anzahl 5


Spalten Anzahl 6


Spalten Anzahl 7


Spalten Anzahl 8


Spalten Anzahl 9


Spalten Anzahl 10


Spalten Anzahl 11


Spalten Anzahl 12





Spalten Anzahl 1


Spalten Anzahl 2


Spalten Anzahl 3


Spalten Anzahl 4


Spalten Anzahl 5


Spalten Anzahl 6


Spalten Anzahl 7


Spalten Anzahl 8


Spalten Anzahl 9


Spalten Anzahl 10


Spalten Anzahl 11


Spalten Anzahl 12





Spalten Anzahl 1


Spalten Anzahl 2


Spalten Anzahl 3


Spalten Anzahl 4


Spalten Anzahl 5


Spalten Anzahl 6


Spalten Anzahl 7


Spalten Anzahl 8


Spalten Anzahl 9


Spalten Anzahl 10


Spalten Anzahl 11


Spalten Anzahl 12





Spalten Anzahl 1


Spalten Anzahl 2


Spalten Anzahl 3


Spalten Anzahl 4


Spalten Anzahl 5


Spalten Anzahl 6


Spalten Anzahl 7


Spalten Anzahl 8


Spalten Anzahl 9


Spalten Anzahl 10


Spalten Anzahl 11


Spalten Anzahl 12