</TECH NEWS>
NEUESTES VON UNSEREN ENTWICKLERN:

14.03.2019 – von Eike Eschmann|

CSS flex – Einsatz des „Flexible Box Layout Module“

Seit einiger Zeit nutzen wir das „Flexible Box Layout Module“. Es ermöglicht uns auf eine einfachere Weise die Boxen gleich hoch darzustellen oder den Content in den Boxen auf verschiedenen Viewports anders zu positionieren.

Dank der CSS Eigenschaft flex benötigen wir kein Javascript mehr, um die Boxen in der Höhe anzugleichen. Flex gibt uns sowohl die Möglichkeit die darin erhaltenen Elemente in der vertikalen sowie horizontalen Position zu
setzen.

Nehmen wir als Beispiel unsere Informationsboxen auf der Startseite von Sparhandy.de:

Mit display: flex; wird die Flexbox auf unserer box-area aktiviert. flex-direction:row ist als Standard festgelegt und positioniert unsere Kind Elemente nebeneinander, flex-direction: column setzt diese untereinander.
row-reverse bzw. column-reverse dreht die Reihenfolge der Kind-Elemente um.

flex-direction: row-reverse bzw. flex-direction: column-reverse dreht die Reihenfolge der Kind-Elemente um. Dies kann man natürlich auch in den Boxen machen um den Text über dem Bild darzustellen.

flex-direction: row-reverse; flex-direction: column-reverse;

Die justify-content Eigenschaft steuert die Kind-Elemente in der waagerechten, die align-items Eigenschaft in der senkrechten. Dies ist ganz nützlich wenn man beispielsweise den Text in der horiziontalen und vertikalen mittig positionieren möchte. Als Beispiel dienen die Überschriften (Handys, Handy mit Vertrag oder Handytarife) in unserem Bild-Block, die wir unterschiedlich positionieren.

Via width oder flex-basis können wir die Breite bestimmen. In Kombination mit der flex-wrap Eigenschaft kann festgelegt werden, dass Items in mehrere Spalten und Zeilen umbrechen. Wir geben unseren Boxen in diesem Beispiel die Breite 50% mit. Über flex-grow bzw. flex-shrink erlauben wir sozusagen ob sich die Box ausdehnen sowie kleiner werden darf.

Dank dem „Flexible Box Layout Module“ ist es möglich, die Reihenfolge via order gezielt zu ändern. Ein Beispiel dazu seht ihr unten. Unsere erste Box (Handys) setzen wir nach hinten, die mittlere Box (Handy mit Vertrag) zeigen wir als erstes an und unsere letzte Box (Handytarife) nehmen wir in die Mitte.

Das ist im groben erklärt das „Flexible Box Layout Module“. Manche Eigenschaften sind hier nicht erklärt, sollte euch aber nicht daran hindern, sie auch mal auszuprobieren. Wenn man den Dreh einmal raus hat, macht es nicht nur Spaß sie zu nutzen und es vereinfacht so manches in der täglichen Programmier-Arbeit.



WEITERE SPANNENDE BEITRÄGE



Unternehmen Marken Team Presse Karriere Tech-Blog SH Händler-Shop