Spezifikationsunterschiede von Flexbox
In unserem vorigen Blogbeitrag zum Thema Flexbox haben wir bereits die Vorteile des neuen Layout Moduls erläutert. Nach einem ersten Test in der Praxis haben wir jedoch festgestellt, dass es noch viele Dinge zu beachten gibt, um Flexbox sinnvoll einzusetzen.
1. Alte Syntax vs. neue Syntax
Flexbox hat sich in den letzten Jahren stark verändert. Derzeit existieren zwei unterschiedliche Spezifikationen.
Alte Syntax
Die alte Syntax stammt aus dem Jahr 2009 und genießt recht hohen Browsersupport. Alte Webkit-Browser und Firefox unterstützen diese Syntax. Man erkennt diese Version ganz leicht an der Anweisung display: box;
oder an Eigenschaften, die mit box-
beginnen.
Spezialfall IE10
IE10 unterstützt eine Hybridversion von Flexbox, die eine Mischung aus alter und neuer Syntax ist und aus dem Jahr 2011 stammt. Man erkennt sie an der Anweisung display: flexbox;
.
Neue Syntax
Die neue Syntax wurde nach 2011 entwickelt und ist die aktuelle Spezifikation des W3C. Diese wird mit display: flex;
definiert, sowie mit allen Eigenschaften, die mit flex-
beginnen. Folgende Browser unterstützen diese Version: Chrome 21+, Opera (& Opera Mobile) 12.1+, und Blackberry 10+.
2. Browserprefixe
Zusätzlich zu den Spezifikationsunterschieden müssen auch die verschiedenen Prefixe für Browser beachtet werden:
- -webkit-
- -moz- (für Firefox auf Android)
- -ms-(für IE10)
3. Unterschiede in der Syntax
Aktueller Syntax | Syntax 2009 | Syntax 2011 |
display: flex | display: box | display: flexbox |
flex-direction: row | box-orient: horizontal | box-orient: horizontal |
justify-content: flex-start | box-pack: start | box-pack: start |
align-items: flex-start | box-align: start | box-align: start |
flex: 1 | box-flex: 1 | flex: 1 |
align-items: left | box-align: left |