{"id":989,"date":"2016-07-18T17:08:45","date_gmt":"2016-07-18T15:08:45","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=989"},"modified":"2017-11-03T14:29:34","modified_gmt":"2017-11-03T13:29:34","slug":"flexbox-der-traum-aller-entwicklerinnen","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/","title":{"rendered":"Flexbox – der Traum aller EntwicklerInnen"},"content":{"rendered":"

Zu einer Webseite geh\u00f6rt\u00a0auch die Darstellung der Inhalte in Spalten, um z.B. 3 Teaser nebeneinander anzuordnen oder neben dem Hauptinhalt eine schmale Spalte mit der Unternavigation anzuzeigen. Lange wurde dies mit der CSS-Eigenschaft „Float“ umgesetzt. Doch die L\u00f6sung mittels Float hat einige nervenraubende Haken.<\/p>\n

Nachteile bei Spalten mit Float<\/h2>\n

Sind die Spalten mit der CSS-Eigenschaft Float umgesetzt, kommt es zum Einen zu Problemen, die Spalten-Breiten prozentual aufzuteilen. Bei\u00a0einer responsiven Webseite<\/a> arbeitet man mit Prozenten anstatt festen Werten, damit die Breiten sich dem aufrufenden Display anpassen. So m\u00fcsste jede Spalte in einem 3-spaltigen Raster eine Breite von 33,3333% bekommen. Einige Browser unterst\u00fctzen die Ausgabe\u00a0aber nur mit ganzen Werten. Aus 33,333% werden also 33% und\u00a0die Spalten schlie\u00dfen nicht b\u00fcndig ab, da 1% Rest bleibt.<\/p>\n

Am problematischsten ist allerdings die H\u00f6hen-Berechnung der Spalten. In einigen Layouts sollten diese gleich hoch sein, um z.B. 3 farbige Boxen mit\u00a0gleicher H\u00f6he\u00a0nebeneinander anzuzeigen. Mit der Umsetzung der Spalten mittels Float werden die H\u00f6hen der einzelnen Spalten nicht beeinflusst, d.h. jede Spalte ist so hoch wie ihr eigener Inhalt. Eine H\u00f6hen-Ausrichtung anhand der Nachbar-Spalten ist von Haus aus nicht m\u00f6glich. Es gibt zur L\u00f6sung dieses Problems einige JavaScript-Workarounds oder eine L\u00f6sung mittels der Tabellen-Darstellung. Sch\u00f6ne L\u00f6sungen sind dies aber nicht.<\/p>\n

Flexbox bringt Abhilfe<\/h2>\n

Aus diesen Problematiken wurde die Idee zu der CSS-Eigenschaft „Flexbox“ geboren und in den CSS-Standard integriert. Doch dauerte es einige Zeit, bis diese auch von allen neueren Browsern unterst\u00fctzt wurde. Noch heute unterst\u00fctzt der Internet Explorer 11 die Eigenschaft nur eingeschr\u00e4nkt. Doch ist die Unterst\u00fctzung nun weitestgehend in allen Browsern gegeben, so dass die Eigenschaft nun auch effektiv eingesetzt werden kann – zur gro\u00dfen Freude unserer EntwicklerInnen.<\/p>\n

Mittels Flexbox ausgerichtete Spalten k\u00f6nnen ohne Rest auf die komplette Breite aufgeteilt werden (z.B. mittels 33,3333%). Zudem werden die H\u00f6hen der Spalten aneinander angeglichen. Die CSS-Eigenschaft Flexbox l\u00f6st somit viele Probleme von Haus aus und bringt des Weiteren noch viele praktische Optionen mit.<\/p>\n

Ein Beispiel<\/h3>\n

In dem folgenden Beispiel werden 3 Spalten mittels der CSS-Eigenschaft Flexbox nebeneinander ausgerichtet. Das Bild zeigt das Endergebnis. Man kann gut erkennen, dass alle 3 Spalten in der H\u00f6he gleich\u00a0sind.<\/p>\n

\"Spalten<\/p>\n

Das HTML-Ger\u00fcst der drei Spalten sieht folgenderma\u00dfen aus:<\/p>\n

<div class=\"cs-grid-row\">\r\n  <div class=\"cs-grid-col-d-4\">\r\n    <p>Spalte 1<\/p>\r\n  <\/div>\r\n  <div class=\"cs-grid-col-d-4\">\r\n    <p>\r\n      Spalte 2\r\n      <br\/>\r\n      <br\/>\r\n      Mit etwas mehr Text\r\n    <\/p>\r\n  <\/div>\r\n  <div class=\"cs-grid-col-d-4\">\r\n    <p>Spalte 3<\/p>\r\n  <\/div>\r\n<\/div><\/pre>\n
Der Unterschied zu der Umsetzung der Spalten mittels Float-CSS-Eigenschaft liegt im CSS-Code der Spalten. Der folgende Code-Ausschnitt zeigt diesen. Um die\u00a03 Spalten liegt eine div-Box (class=“cs-grid-row“). Dieser Box wird die Eigenschaft\u00a0display: flex; zugeteilt. So reagieren diese Box und deren direkte Kind-Elemente als Flexbox und k\u00f6nnen \u00fcber die Flexbox-Optionen beeinflusst werden. Den Kind-Elementen (den Spalten) wird via prozentualer Breitenangabe die entsprechende Breite\u00a0zugewiesen.<\/p>\n
.cs-grid-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  box-sizing: border-box;\r\n  margin: 0 -15px;\r\n\r\n  > .cs-grid-col-d-4 {\r\n    flex-basis: 33.33333333%;\r\n    max-width: 33.33333333%;\r\n    width: 33.33333333%;\r\n    flex: 0 0 auto;\r\n    box-sizing: border-box;\r\n    padding: 0 15px;\r\n  }\r\n}<\/pre>\n
Flexbox kann noch mehr<\/h2>\n
Das Darstellen einiger gleichhoher Spalten ist nur ein kleines Beispiel, was mit Flexbox m\u00f6glich ist. Prinzipiell kann ein ganzes responsive Webdesign<\/a> mit Flexbox erstellt und ausgerichtet werden. Auf ein paar Highlights in den Optionen von Flexbox m\u00f6chte ich hier noch kurz eingehen.<\/p>\n
Mit Flexbox kann die Reihenfolge der Kind-Elemente beeinflusst werden. Dies kann n\u00fctzlich sein, wenn eine linke Spalte in einem responsiven Webdesign in der mobilen Darstellung unterhalb der rechten Spalte dargestellt werden soll. Im normalen Fluss des HTML-Codes w\u00e4re dies eigentlich nicht der Fall, die linke Spalte w\u00e4re oberhalb der rechten, da sie im HTML-Code vor der rechten Spalte definiert ist. Mit der CSS-Eigenschaft flex-direction<\/strong> kann dies in der passenden Media-Query umgekehrt werden.<\/p>\n
Die angesprochene H\u00f6henanpassung kann mittels der Option align-items<\/strong> konfiguriert werden. Wenn die Kind-Elemente nicht auf eine H\u00f6he gebracht werden sollen, k\u00f6nnen die Spalten vertikal flexibel ausgerichtet werden.<\/p>\n
Neben der vertikalen Ausrichtung der Kind-Elemente ist auch eine horizontale Ausrichtung konfigurierbar. Mit der Eigenschaft justify-content<\/strong> kann bestimmt werden, ob die Kind-Elemente innerhalb des umfassenden Eltern-Elements rechts- oder linksb\u00fcndig angezeigt werden sollen. Auch Optionen mit mittiger Ausrichtung sind\u00a0m\u00f6glich.<\/p>\n
Fazit zu Flexbox<\/h2>\n
Die CSS-Eigenschaft Flexbox erleichtert das Erstellen responsiver Inhalts-Spalten ungemein und bietet zudem eine gro\u00dfe Palette an Optionen. So ist f\u00fcr die meisten F\u00e4lle eine L\u00f6sung mittels Flexbox m\u00f6glich. Auch das Umstrukturieren der Spalten oder Boxen ist f\u00fcr responsive Webseiten mit Flexbox in Verbindung mit Media-Queries sehr einfach und komfortabel. Gerade unter dem responsiven Aspekt er\u00f6ffnet Flexbox mit wenigen Zeilen CSS-Code M\u00f6glichkeiten f\u00fcr die mobilen Ansichten, die sonst aufwendig umgesetzt werden m\u00fcssten.<\/p>\n
Somit ist Flexbox aus der responsiven Web-Entwicklung nicht mehr wegzudenken. Haben Sie Interesse an einer responsiven Webseite? Kommen Sie mit uns in\u00a0Kontakt<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Flexbox l\u00f6st von Haus aus viele Probleme und macht die Umsetzung von responsiven Spalten kinderleicht.<\/p>\n","protected":false},"author":8,"featured_media":1010,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[137],"tags":[67,69,26,66],"class_list":["post-989","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-css3","tag-flexbox","tag-responsive","tag-webdesign"],"acf":[],"yoast_head":"\nFlexbox - der Traum aller EntwicklerInnen - clickstorm Blog<\/title>\n<meta name=\"description\" content=\"Flexbox l\u00f6st von Haus aus viele Probleme und macht die Umsetzung von responsiven Spalten kinderleicht - ein Traum f\u00fcr WebentwicklerInnen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flexbox - der Traum aller EntwicklerInnen - clickstorm Blog\" \/>\n<meta property=\"og:description\" content=\"Flexbox l\u00f6st von Haus aus viele Probleme und macht die Umsetzung von responsiven Spalten kinderleicht - ein Traum f\u00fcr WebentwicklerInnen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/\" \/>\n<meta property=\"og:site_name\" content=\"clickstorm Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/de-de.facebook.com\/clickstorm\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-18T15:08:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-03T13:29:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/07\/clickstorm-beispiel-spalten-mit-flexbox.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"578\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Angela\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:site\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Angela\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/flexbox-der-traum-aller-entwicklerinnen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/flexbox-der-traum-aller-entwicklerinnen\\\/\"},\"author\":{\"name\":\"Angela\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/ba487d63eccacea4839c77536f9dd569\"},\"headline\":\"Flexbox – der Traum aller EntwicklerInnen\",\"datePublished\":\"2016-07-18T15:08:45+00:00\",\"dateModified\":\"2017-11-03T13:29:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/flexbox-der-traum-aller-entwicklerinnen\\\/\"},\"wordCount\":754,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/flexbox-der-traum-aller-entwicklerinnen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/clickstorm-beispiel-spalten-mit-flexbox.jpg\",\"keywords\":[\"CSS3\",\"Flexbox\",\"Responsive\",\"Webdesign\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/flexbox-der-traum-aller-entwicklerinnen\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/flexbox-der-traum-aller-entwicklerinnen\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/flexbox-der-traum-aller-entwicklerinnen\\\/\",\"name\":\"Flexbox - der Traum aller EntwicklerInnen - clickstorm Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/flexbox-der-traum-aller-entwicklerinnen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/flexbox-der-traum-aller-entwicklerinnen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/clickstorm-beispiel-spalten-mit-flexbox.jpg\",\"datePublished\":\"2016-07-18T15:08:45+00:00\",\"dateModified\":\"2017-11-03T13:29:34+00:00\",\"description\":\"Flexbox l\u00f6st von Haus aus viele Probleme und macht die Umsetzung von responsiven Spalten kinderleicht - ein Traum f\u00fcr WebentwicklerInnen.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/flexbox-der-traum-aller-entwicklerinnen\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/flexbox-der-traum-aller-entwicklerinnen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/flexbox-der-traum-aller-entwicklerinnen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/clickstorm-beispiel-spalten-mit-flexbox.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/clickstorm-beispiel-spalten-mit-flexbox.jpg\",\"width\":1170,\"height\":578,\"caption\":\"clickstorm Beispiel Spalten mit flexbox\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/flexbox-der-traum-aller-entwicklerinnen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flexbox – der Traum aller EntwicklerInnen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"name\":\"clickstorm Blog\",\"description\":\"Neuigkeiten rund um Webentwicklung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\",\"name\":\"clickstorm GmbH\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"caption\":\"clickstorm GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/de-de.facebook.com\\\/clickstorm\\\/\",\"https:\\\/\\\/x.com\\\/clickstorm_gmbh\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCEaU1eUbug6OiI4uU6vA-cA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/ba487d63eccacea4839c77536f9dd569\",\"name\":\"Angela\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"caption\":\"Angela\"},\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/author\\\/angela\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flexbox - der Traum aller EntwicklerInnen - clickstorm Blog","description":"Flexbox l\u00f6st von Haus aus viele Probleme und macht die Umsetzung von responsiven Spalten kinderleicht - ein Traum f\u00fcr WebentwicklerInnen.","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:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/","og_locale":"de_DE","og_type":"article","og_title":"Flexbox - der Traum aller EntwicklerInnen - clickstorm Blog","og_description":"Flexbox l\u00f6st von Haus aus viele Probleme und macht die Umsetzung von responsiven Spalten kinderleicht - ein Traum f\u00fcr WebentwicklerInnen.","og_url":"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/","og_site_name":"clickstorm Blog","article_publisher":"https:\/\/de-de.facebook.com\/clickstorm\/","article_published_time":"2016-07-18T15:08:45+00:00","article_modified_time":"2017-11-03T13:29:34+00:00","og_image":[{"width":1170,"height":578,"url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/07\/clickstorm-beispiel-spalten-mit-flexbox.jpg","type":"image\/jpeg"}],"author":"Angela","twitter_card":"summary_large_image","twitter_creator":"@clickstorm_gmbh","twitter_site":"@clickstorm_gmbh","twitter_misc":{"Verfasst von":"Angela","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/#article","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/"},"author":{"name":"Angela","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/ba487d63eccacea4839c77536f9dd569"},"headline":"Flexbox – der Traum aller EntwicklerInnen","datePublished":"2016-07-18T15:08:45+00:00","dateModified":"2017-11-03T13:29:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/"},"wordCount":754,"commentCount":0,"publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/07\/clickstorm-beispiel-spalten-mit-flexbox.jpg","keywords":["CSS3","Flexbox","Responsive","Webdesign"],"articleSection":["Frontend"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/","url":"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/","name":"Flexbox - der Traum aller EntwicklerInnen - clickstorm Blog","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/#primaryimage"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/07\/clickstorm-beispiel-spalten-mit-flexbox.jpg","datePublished":"2016-07-18T15:08:45+00:00","dateModified":"2017-11-03T13:29:34+00:00","description":"Flexbox l\u00f6st von Haus aus viele Probleme und macht die Umsetzung von responsiven Spalten kinderleicht - ein Traum f\u00fcr WebentwicklerInnen.","breadcrumb":{"@id":"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/#primaryimage","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/07\/clickstorm-beispiel-spalten-mit-flexbox.jpg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/07\/clickstorm-beispiel-spalten-mit-flexbox.jpg","width":1170,"height":578,"caption":"clickstorm Beispiel Spalten mit flexbox"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.clickstorm.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Flexbox – der Traum aller EntwicklerInnen"}]},{"@type":"WebSite","@id":"https:\/\/www.clickstorm.de\/blog\/#website","url":"https:\/\/www.clickstorm.de\/blog\/","name":"clickstorm Blog","description":"Neuigkeiten rund um Webentwicklung","publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clickstorm.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.clickstorm.de\/blog\/#organization","name":"clickstorm GmbH","url":"https:\/\/www.clickstorm.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","caption":"clickstorm GmbH"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/de-de.facebook.com\/clickstorm\/","https:\/\/x.com\/clickstorm_gmbh","https:\/\/www.youtube.com\/channel\/UCEaU1eUbug6OiI4uU6vA-cA"]},{"@type":"Person","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/ba487d63eccacea4839c77536f9dd569","name":"Angela","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","caption":"Angela"},"url":"https:\/\/www.clickstorm.de\/blog\/author\/angela\/"}]}},"_links":{"self":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/989","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/comments?post=989"}],"version-history":[{"count":25,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/989\/revisions"}],"predecessor-version":[{"id":1330,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/989\/revisions\/1330"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media\/1010"}],"wp:attachment":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media?parent=989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/categories?post=989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/tags?post=989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}