Das Flexbox-Prinzip in der Praxis
Kommentare

Flexbox ist ein CSS3-Layout-Modul, in dem man Inhalte flexibel in Reihen und Spalten anordnen kann – unabhängig von der Codereihenfolge. Im Flex Container werden HTML-Elemente je nach Deklaration so

Flexbox ist ein CSS3-Layout-Modul, in dem man Inhalte flexibel in Reihen und Spalten anordnen kann – unabhängig von der Codereihenfolge. Im Flex Container werden HTML-Elemente je nach Deklaration so angeordnet, dass sie den Raum ausfüllen bzw. entsprechend verkleinert, damit sie nicht „überlaufen“. Flexbox ist derzeit aber noch eine W3C Candidate Recommendation. Das bedeutet einerseits, dass Flexbox im Grunde fertig ist, sprich, dass es keine tiefgreifenden Änderungen mehr geben wird. Andererseits bedeutet es aber auch, dass es bisher noch nicht browserübergreifend einsetzbar ist. Webentwickler Jens Grochtdreis rechnet damit, dass Flexbox erst in vier bis fünf Jahren flächendeckend zum Einsatz kommen wird.

Das ist noch lange hin, also weiterhin Float-Layouts benutzen? Die gute Nachricht ist, dass man die Flexbox-Technik vom Prinzip her schon in einer „Light-Version“ anwenden kann. Ian Devlin zeigt, wie man über die Display-Eigenschaft die Reihenfolge der Elemente auf der Website beeinflussen kann. Jens Grochtdreis hat eine zweispaltige Beispielseite auf Codepen veröffentlicht, die er mit YAML gebaut hat. Ein kleines Tutorial, wie er diese umgesetzt hat, findet ihr auf webkrauts.de.

Eine allgemeine Einführungen zu Flexbox gibt es hier.

Aufmacherbild: Elastic bands on hands, isolated on white von Shutterstock / Urheberrecht:Africa Studio

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -