{"id":1620,"date":"2013-07-11T12:13:07","date_gmt":"2013-07-11T10:13:07","guid":{"rendered":"https:\/\/intu.io\/?p=1620"},"modified":"2013-07-11T12:13:07","modified_gmt":"2013-07-11T10:13:07","slug":"spezifikationsunterschiede-von-flexbox","status":"publish","type":"post","link":"https:\/\/intu.io\/blog\/spezifikationsunterschiede-von-flexbox\/","title":{"rendered":"Spezifikationsunterschiede von Flexbox"},"content":{"rendered":"

In unserem vorigen Blogbeitrag zum Thema Flexbox<\/a> haben wir bereits die Vorteile des neuen Layout Moduls erl\u00e4utert. Nach einem ersten Test in der Praxis haben wir jedoch festgestellt, dass es noch viele Dinge zu beachten gibt, um Flexbox sinnvoll einzusetzen.<\/p>\n

1. Alte Syntax vs. neue Syntax<\/h2>\n

Flexbox hat sich in den letzten Jahren stark ver\u00e4ndert. Derzeit existieren zwei unterschiedliche Spezifikationen.<\/p>\n

Alte Syntax<\/h3>\n

Die\u00a0alte Syntax<\/a> stammt aus dem Jahr 2009 und genie\u00dft recht hohen Browsersupport. Alte Webkit-Browser und Firefox unterst\u00fctzen diese Syntax. Man erkennt diese Version ganz leicht an der Anweisung display: box;<\/code> oder an Eigenschaften, die mit box-<\/code> beginnen.<\/p>\n

Spezialfall IE10<\/h3>\n

IE10 unterst\u00fctzt 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;<\/code>.<\/p>\n

Neue Syntax<\/h3>\n

Die\u00a0neue Syntax<\/a> wurde nach 2011 entwickelt und ist die aktuelle Spezifikation des W3C. Diese wird mit display: flex;<\/code> definiert, sowie mit allen Eigenschaften, die mit flex-<\/code> beginnen. Folgende Browser unterst\u00fctzen diese Version: Chrome 21+, Opera (& Opera Mobile) 12.1+, und Blackberry 10+.<\/p>\n

2. Browserprefixe<\/h2>\n

Zus\u00e4tzlich zu den Spezifikationsunterschieden m\u00fcssen auch die verschiedenen Prefixe f\u00fcr Browser beachtet werden:<\/p>\n

    \n
  • -webkit-<\/li>\n
  • -moz- (f\u00fcr Firefox auf Android)<\/li>\n
  • -ms-(f\u00fcr IE10)<\/li>\n<\/ul>\n

    3. Unterschiede in der Syntax<\/h2>\n\n\n\n\n\n\n\n\n\n
    Aktueller Syntax<\/strong><\/td>\nSyntax 2009<\/strong><\/td>\nSyntax 2011<\/strong><\/td>\n<\/tr>\n
    display: flex<\/td>\ndisplay: box<\/td>\ndisplay: flexbox<\/td>\n<\/tr>\n
    flex-direction: row<\/td>\nbox-orient: horizontal<\/td>\nbox-orient: horizontal<\/td>\n<\/tr>\n
    justify-content: flex-start<\/td>\nbox-pack: start<\/td>\nbox-pack: start<\/td>\n<\/tr>\n
    align-items: flex-start<\/td>\nbox-align: start<\/td>\nbox-align: start<\/td>\n<\/tr>\n
    flex: 1<\/td>\nbox-flex: 1<\/td>\nflex: 1<\/td>\n<\/tr>\n
    align-items: left<\/td>\nbox-align: left<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

    In unserem vorigen Blogbeitrag zum Thema Flexbox haben wir bereits die Vorteile des neuen Layout Moduls erl\u00e4utert. 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\u00e4ndert. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[21,45,123],"class_list":["post-1620","post","type-post","status-publish","format-standard","hentry","category-blog","tag-browser-support","tag-flexbox","tag-syntax"],"yoast_head":"\nSpezifikationsunterschiede von Flexbox - intuio Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/intu.io\/blog\/spezifikationsunterschiede-von-flexbox\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Spezifikationsunterschiede von Flexbox - intuio Blog\" \/>\n<meta property=\"og:description\" content=\"In unserem vorigen Blogbeitrag zum Thema Flexbox haben wir bereits die Vorteile des neuen Layout Moduls erl\u00e4utert. 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\u00e4ndert. […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/intu.io\/blog\/spezifikationsunterschiede-von-flexbox\/\" \/>\n<meta property=\"og:site_name\" content=\"intuio Blog\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-11T10:13:07+00:00\" \/>\n<meta name=\"author\" content=\"intuio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@intuio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"intuio\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/intu.io\\\/blog\\\/spezifikationsunterschiede-von-flexbox\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/intu.io\\\/blog\\\/spezifikationsunterschiede-von-flexbox\\\/\"},\"author\":{\"name\":\"intuio\",\"@id\":\"https:\\\/\\\/intu.io\\\/blog\\\/#\\\/schema\\\/person\\\/9be7154f89eb1c979c8e224658ddd11e\"},\"headline\":\"Spezifikationsunterschiede von Flexbox\",\"datePublished\":\"2013-07-11T10:13:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/intu.io\\\/blog\\\/spezifikationsunterschiede-von-flexbox\\\/\"},\"wordCount\":238,\"commentCount\":0,\"keywords\":[\"browser support\",\"flexbox\",\"syntax\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/intu.io\\\/blog\\\/spezifikationsunterschiede-von-flexbox\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/intu.io\\\/blog\\\/spezifikationsunterschiede-von-flexbox\\\/\",\"url\":\"https:\\\/\\\/intu.io\\\/blog\\\/spezifikationsunterschiede-von-flexbox\\\/\",\"name\":\"Spezifikationsunterschiede von Flexbox - intuio Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/intu.io\\\/blog\\\/#website\"},\"datePublished\":\"2013-07-11T10:13:07+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/intu.io\\\/blog\\\/#\\\/schema\\\/person\\\/9be7154f89eb1c979c8e224658ddd11e\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/intu.io\\\/blog\\\/spezifikationsunterschiede-von-flexbox\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/intu.io\\\/blog\\\/spezifikationsunterschiede-von-flexbox\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/intu.io\\\/blog\\\/spezifikationsunterschiede-von-flexbox\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/intu.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Spezifikationsunterschiede von Flexbox\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/intu.io\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/intu.io\\\/blog\\\/\",\"name\":\"intuio Blog\",\"description\":\"Blogging on User Experience Design, Usability Engineering & User Interface Development\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/intu.io\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/intu.io\\\/blog\\\/#\\\/schema\\\/person\\\/9be7154f89eb1c979c8e224658ddd11e\",\"name\":\"intuio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/201c39808860b4ea7fccc26a8778ccaba7aa737fe4d7bd79868bcc8f0e9ba6c8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/201c39808860b4ea7fccc26a8778ccaba7aa737fe4d7bd79868bcc8f0e9ba6c8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/201c39808860b4ea7fccc26a8778ccaba7aa737fe4d7bd79868bcc8f0e9ba6c8?s=96&d=mm&r=g\",\"caption\":\"intuio\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/intuio\"],\"url\":\"https:\\\/\\\/intu.io\\\/blog\\\/author\\\/intuio\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Spezifikationsunterschiede von Flexbox - intuio Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/intu.io\/blog\/spezifikationsunterschiede-von-flexbox\/","og_locale":"en_GB","og_type":"article","og_title":"Spezifikationsunterschiede von Flexbox - intuio Blog","og_description":"In unserem vorigen Blogbeitrag zum Thema Flexbox haben wir bereits die Vorteile des neuen Layout Moduls erl\u00e4utert. 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\u00e4ndert. […]","og_url":"https:\/\/intu.io\/blog\/spezifikationsunterschiede-von-flexbox\/","og_site_name":"intuio Blog","article_published_time":"2013-07-11T10:13:07+00:00","author":"intuio","twitter_card":"summary_large_image","twitter_creator":"@intuio","twitter_misc":{"Written by":"intuio","Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/intu.io\/blog\/spezifikationsunterschiede-von-flexbox\/#article","isPartOf":{"@id":"https:\/\/intu.io\/blog\/spezifikationsunterschiede-von-flexbox\/"},"author":{"name":"intuio","@id":"https:\/\/intu.io\/blog\/#\/schema\/person\/9be7154f89eb1c979c8e224658ddd11e"},"headline":"Spezifikationsunterschiede von Flexbox","datePublished":"2013-07-11T10:13:07+00:00","mainEntityOfPage":{"@id":"https:\/\/intu.io\/blog\/spezifikationsunterschiede-von-flexbox\/"},"wordCount":238,"commentCount":0,"keywords":["browser support","flexbox","syntax"],"articleSection":["Blog"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/intu.io\/blog\/spezifikationsunterschiede-von-flexbox\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/intu.io\/blog\/spezifikationsunterschiede-von-flexbox\/","url":"https:\/\/intu.io\/blog\/spezifikationsunterschiede-von-flexbox\/","name":"Spezifikationsunterschiede von Flexbox - intuio Blog","isPartOf":{"@id":"https:\/\/intu.io\/blog\/#website"},"datePublished":"2013-07-11T10:13:07+00:00","author":{"@id":"https:\/\/intu.io\/blog\/#\/schema\/person\/9be7154f89eb1c979c8e224658ddd11e"},"breadcrumb":{"@id":"https:\/\/intu.io\/blog\/spezifikationsunterschiede-von-flexbox\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/intu.io\/blog\/spezifikationsunterschiede-von-flexbox\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/intu.io\/blog\/spezifikationsunterschiede-von-flexbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/intu.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Spezifikationsunterschiede von Flexbox"}]},{"@type":"WebSite","@id":"https:\/\/intu.io\/blog\/#website","url":"https:\/\/intu.io\/blog\/","name":"intuio Blog","description":"Blogging on User Experience Design, Usability Engineering & User Interface Development","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/intu.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/intu.io\/blog\/#\/schema\/person\/9be7154f89eb1c979c8e224658ddd11e","name":"intuio","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/201c39808860b4ea7fccc26a8778ccaba7aa737fe4d7bd79868bcc8f0e9ba6c8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/201c39808860b4ea7fccc26a8778ccaba7aa737fe4d7bd79868bcc8f0e9ba6c8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/201c39808860b4ea7fccc26a8778ccaba7aa737fe4d7bd79868bcc8f0e9ba6c8?s=96&d=mm&r=g","caption":"intuio"},"sameAs":["https:\/\/x.com\/intuio"],"url":"https:\/\/intu.io\/blog\/author\/intuio\/"}]}},"_links":{"self":[{"href":"https:\/\/intu.io\/blog\/wp-json\/wp\/v2\/posts\/1620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/intu.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/intu.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/intu.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/intu.io\/blog\/wp-json\/wp\/v2\/comments?post=1620"}],"version-history":[{"count":0,"href":"https:\/\/intu.io\/blog\/wp-json\/wp\/v2\/posts\/1620\/revisions"}],"wp:attachment":[{"href":"https:\/\/intu.io\/blog\/wp-json\/wp\/v2\/media?parent=1620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/intu.io\/blog\/wp-json\/wp\/v2\/categories?post=1620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/intu.io\/blog\/wp-json\/wp\/v2\/tags?post=1620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}