search home list

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:

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
Show all articles

What do you think?