Gang und gäbe ist mittlerweile der Gebrauch von umfließenden Container in HTML (float). Allerdings führt das oft zu Problemen wenn man z.B mit unterschiedlichen Abständen und Positionierungen hantiert. Außerdem ist dieses Modell einfach umständlich und grausig zu implementieren.
Mit einem W3C Vorschlag Ende 2013 hielt das „Flexible Box Layout Module“ Einzug in den CSS3 Standard. Die Idee hat man schon früher in der graphischen Programmierung. Innerhalb eines Containers wird eine unbestimmte Menge an Elementen untergebracht. Die Aufteilung der verfügbaren Breite erfolgt anhand von Anteilen.
Knapp ein Jahr später ist das Feature auch in den meisten Browsern verfügbar (Versionen später als November 2013).
Ein Beispiel
CSS:
.flex-container {
display: flex;
}
.flex-item {
flex: 1 1 auto;
border: 1px #ff8000 solid;
}
HTML1 (gleiche Aufteilung):
Column 1
Column 2
Column 3
HTML2 (unterschiedliche Aufteilung):
Column 1
Column 2
Column 3
Column 4
Column 5
Weitere Informationen (z.B. Ausbreitung und Ausrichtung) findet man in den folgenden Links:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/
Fazit: Endlich geile Container 😉
0 Kommentare