\nDie Elemente werden entlang der Hauptachse (vom Hauptstartpunkt zum Hauptende) oder der Querachse (vom Querstartpunkt zum Querende) angeordnet.<\/p>\n
![\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/11\/00-basic-terminology.svg\"](\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/11\/00-basic-terminology.svg\")
- \n
- Hauptachse \u2013 Die Hauptachse des Flex-Containers ist die prim\u00e4re Achse, entlang der Flex-Elemente platziert werden. Beachten Sie, dass sie nicht unbedingt horizontal verl\u00e4uft. Sie h\u00e4ngt von der `flex-direction`-Eigenschaft ab (siehe unten).<\/li>\n
- Hauptstart | Hauptende \u2013 Flexible Elemente werden im Container vom Hauptstart bis zum Hauptende platziert.<\/li>\n
- Originalgr\u00f6\u00dfe \u2013 Die Breite oder H\u00f6he eines Flex-Elements, je nachdem, welcher Wert in der Originaldimension angegeben ist, entspricht der Originalgr\u00f6\u00dfe des Elements. Die Eigenschaft \u201cOriginalgr\u00f6\u00dfe\u201d des Flex-Elements ist entweder die Eigenschaft \u201cBreite\u201d oder \u201eH\u00f6he\u201c, je nachdem, welcher Wert in der Originaldimension angegeben ist.<\/li>\n
- Querachse \u2013 Die Achse, die senkrecht zur Hauptachse verl\u00e4uft, wird als Querachse bezeichnet. Ihre Richtung h\u00e4ngt von der Richtung der Hauptachse ab.<\/li>\n
- Kreuzstart | Kreuzende \u2013 Die Flexschn\u00fcre werden mit Artikeln bef\u00fcllt und in den Beh\u00e4lter gelegt, beginnend an der Kreuzstartseite des Flexbeh\u00e4lters und in Richtung Kreuzende.<\/li>\n
- Kreuzgr\u00f6\u00dfe \u2013 Die Breite oder H\u00f6he eines Flex-Elements, je nachdem, welcher Wert in der Kreuzdimension angegeben ist, ist die Kreuzgr\u00f6\u00dfe des Elements. Die Eigenschaft \u201cKreuzgr\u00f6\u00dfe\u201d entspricht dem Wert in der Kreuzdimension, entweder \u201cBreite\u201d oder \u201eH\u00f6he\u201c.<\/li>\n<\/ul>\n
Flexbox-Funktionen<\/h2>\n
Eigenschaften f\u00fcr Eltern
\n(Container)<\/h5>\nAnzeige<\/p>\n
Dies definiert einen flexiblen Container. Je nach dem angegebenen Wert wird er als Inline- oder Blockcontainer dargestellt. Er bietet einen flexiblen Kontext f\u00fcr alle seine direkten Kindelemente.<\/p>\n
\n.container {\r\ndisplay: flex; \/* or inline-flex *\/\r\n}<\/code><\/pre>\n<\/div>\nBiegerichtung<\/h5>\n
\nDadurch wird die Hauptachse definiert und somit die Richtung festgelegt, in der Flex-Elemente innerhalb des Flex-Containers platziert werden. Flexbox (abgesehen vom optionalen Zeilenumbruch) ist ein unidirektionales Layoutkonzept. Flex-Elemente befinden sich \u00fcblicherweise in horizontalen Zeilen oder vertikalen Spalten.<\/p>\n\n.container {\r\nflex-direction: row | row-reverse | column | column-reverse;\r\n}<\/code><\/pre>\n<\/div>\n- \n
- ROW (Standard): Von links nach rechts (ltr). Von rechts nach links (rtl).<\/li>\n
- Zeilenumkehr: von rechts nach links in ltr. von links nach rechts in rtl<\/li>\n
- SPALTE: Wie eine Zeile, aber von oben nach unten<\/li>\n
- Spaltenumkehrung: Wie umgekehrte Zeile, aber von unten nach oben<\/li>\n<\/ul>\n
Flex Wrap<\/h5>\n
\nStandardm\u00e4\u00dfig werden flexible Elemente in einer Zeile angeordnet. Sie k\u00f6nnen dies \u00e4ndern und bei Bedarf festlegen, dass Elemente mit dieser Eigenschaft geschlossen werden k\u00f6nnen.<\/p>\n\n.container {\r\nflex-wrap: nowrap | wrap | wrap-reverse;\r\n}<\/code><\/pre>\n<\/div>\n- \n
- nowrap (Standard): Alle Flex-Elemente werden in einer Zeile umgebrochen.<\/li>\n
- Wickeln: Flexible Artikel werden \u00fcber mehrere Linien von oben nach unten gewickelt.<\/li>\n
- Wrap-Reverse: Flexible Artikel werden in mehreren Reihen von unten nach oben umwickelt.<\/li>\n<\/ul>\n
FLEX-Flow<\/h5>\n
Dies ist eine Kurzform f\u00fcr die Eigenschaften `flex-direction` und `flex-width`, die zusammen die Haupt- und Querachse des Flex-Containers festlegen. Der Standardwert ist `row nowrap`.<\/p>\n
\n.container {\r\nflex-flow: column wrap;\r\n}<\/code><\/pre>\n<\/div>\nInhalt ausrichten<\/h5>\n
\nDies legt die Ausrichtung entlang der Hauptachse fest. Dadurch wird \u00fcbersch\u00fcssiger Leerraum verteilt, wenn alle flexiblen Elemente einer Zeile unflexibel sind oder ihre maximale Gr\u00f6\u00dfe erreicht haben. Au\u00dferdem erm\u00f6glicht es eine gewisse Kontrolle \u00fcber die Ausrichtung von Elementen, die \u00fcber den Zeilenrand hinausragen.<\/p>\n\n.container {\r\njustify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;\r\n}<\/code><\/pre>\n<\/div>\n- \n
- flex-start (Standard): Die Elemente werden am Anfang der Flex-Richtung angeordnet.<\/li>\n
- Flex-Ende: Die Artikel werden am Ende der Flexrichtung verpackt.<\/li>\n
- START: Die Gegenst\u00e4nde werden in Richtung des Schreibmodusbeginns gepackt.<\/li>\n
- ENDE: Die Elemente werden gegen Ende der Schreibrichtung gepackt.<\/li>\n
- LINKS: Die Gegenst\u00e4nde werden in Richtung des linken Randes des Containers gepackt, es sei denn, dies ist mit der Flexrichtung nicht vereinbar; in diesem Fall verh\u00e4lt es sich wie am Anfang.<\/li>\n
- RECHTS: Die Gegenst\u00e4nde werden in Richtung des rechten Randes des Beh\u00e4lters gepackt, es sei denn, es ist sinnvoll, in diese Richtung flexibel zu sein; dann verh\u00e4lt es sich wie das rechte Ende.<\/li>\n
- MITTE: Die Elemente sind entlang der Linie zentriert.<\/li>\n
- Abstand zwischen den Elementen: Die Elemente sind gleichm\u00e4\u00dfig in der Reihe verteilt. Das erste Element befindet sich an der Startlinie, das letzte Element an der Ziellinie.<\/li>\n
- Abstand um die Elemente: Die Elemente sind gleichm\u00e4\u00dfig in einer Reihe angeordnet, mit gleichem Abstand um sie herum. Beachten Sie, dass die Abst\u00e4nde optisch nicht gleich sind, da alle Elemente auf beiden Seiten gleich viel Platz haben. Das erste Element hat einen Abstand von einer Einheit zum Rand des Beh\u00e4lters, aber zwei Einheiten Abstand zum n\u00e4chsten Element, da das n\u00e4chste Element einen eigenen Abstand hat.<\/li>\n
- Gleichm\u00e4\u00dfig verteilt: Die Elemente sind so verteilt, dass der Abstand zwischen je zwei Elementen (und der Abstand zu den R\u00e4ndern) gleich ist.<\/li>\n<\/ul>\n
Es gibt au\u00dferdem zwei weitere Schl\u00fcsselw\u00f6rter, die Sie mit diesen Werten kombinieren k\u00f6nnen: \u00absicher\u00bb und \u201eunsicher\u201c. Die Verwendung von \u201esicher\u201c stellt sicher, dass Sie, unabh\u00e4ngig von der Art der Positionierung, ein Element nicht so weit vom Seitenrand (z. B. vom oberen Seitenrand) verschieben k\u00f6nnen, dass der Inhalt nicht mehr scrollbar ist (bekannt als \u201eDatenverlust\u201c).<\/p>\n
Elemente ausrichten<\/h5>\n
\nDies definiert das Standardverhalten f\u00fcr die Anordnung flexibler Elemente entlang der Querachse in der aktuellen Zeile. Man kann es sich als die Inhaltsausrichtungs-Variante f\u00fcr die Querachse (senkrecht zur Hauptachse) vorstellen.<\/p>\n\n.container {\r\nalign-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;\r\n}<\/code><\/pre>\n<\/div>\n- \n
- STRECKEN (Standard): Den Container ausf\u00fcllen (minimale\/maximale Breite wird weiterhin ber\u00fccksichtigt)<\/li>\n
- flex-start \/ start \/ self-start: Elemente werden am Anfang der Querachse platziert. Der Unterschied zwischen diesen Varianten ist subtil und h\u00e4ngt mit der Einhaltung der Flexbox-Richtungsregeln bzw. der Regeln f\u00fcr den Schreibmodus zusammen.<\/li>\n
- flex-end \/ end \/ self-end: Elemente werden am Ende der Querachse platziert. Der Unterschied ist wiederum subtil und besteht darin, die Flex-Richtungsregeln im Vergleich zu den Schreibmodusregeln zu beachten.<\/li>\n
- MITTE: Die Elemente befinden sich auf der Kreuzachse<\/li>\n
- Basislinie: Die Elemente sind wie ihre Basislinien ausgerichtet.<\/li>\n<\/ul>\n
Inhalt ausrichten<\/h5>\n
\nWenn auf der Querachse zus\u00e4tzlicher Platz vorhanden ist, werden die flexiblen Containerzeilen darin ausgerichtet, \u00e4hnlich wie justify-content einzelne Elemente auf der Hauptachse ausrichtet.<\/p>\n\n.container {\r\nalign-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;\r\n}<\/code><\/pre>\n<\/div>\n- \n
- Normal (Standard): Die Elemente werden in ihrer Standardposition gepackt, als ob kein Wert festgelegt worden w\u00e4re.<\/li>\n
- flex-start \/ start: Elemente werden an den Anfang des Containers umgebrochen. flex-start (mit erweiterter Unterst\u00fctzung) gibt die Flex-Richtung an, w\u00e4hrend start die Schreibrichtung ber\u00fccksichtigt.<\/li>\n
- flex-end \/ end: Elemente, die bis zum Ende des Containers umgebrochen werden. (Weitere Unterst\u00fctzung) flex-end gibt die Flex-Richtung an, w\u00e4hrend end die Schreibrichtung ber\u00fccksichtigt.<\/li>\n
- MITTE: Gegenst\u00e4nde, die sich in der Mitte des Beh\u00e4lters befinden<\/li>\n
- Abstand zwischen den Elementen: Die Elemente sind gleichm\u00e4\u00dfig verteilt. Die erste Zeile befindet sich am Anfang des Containers und die letzte Zeile am Ende des Containers.<\/li>\n
- Abstand um die Zeile: Die Elemente sind gleichm\u00e4\u00dfig verteilt, mit gleichem Abstand um jede Zeile herum.<\/li>\n
- Gleichm\u00e4\u00dfiger Raum: Die Gegenst\u00e4nde sind gleichm\u00e4\u00dfig verteilt und haben denselben Abstand um sich herum.<\/li>\n
- Strecken: Die Linien werden gestreckt, um den verbleibenden Platz auszuf\u00fcllen.<\/li>\n<\/ul>\n
L\u00fccke, Zeilenl\u00fccke, Spaltenl\u00fccke<\/h5>\n
\nDie Abstandseigenschaft steuert explizit den Abstand zwischen flexiblen Elementen. Dieser Abstand gilt nur zwischen den Elementen, nicht an den \u00e4u\u00dferen R\u00e4ndern.<\/p>\n\n.container {\r\ndisplay: flex;\r\n...\r\ngap: 10px;\r\ngap: 10px 20px; \/* row-gap column gap *\/\r\nrow-gap: 10px;\r\ncolumn-gap: 20px;\r\n}<\/code><\/pre>\n<\/div>\nDieses Verhalten kann man sich als minimalen Spaltenabstand vorstellen, sodass, wenn der Spaltenabstand irgendwie gr\u00f6\u00dfer ist (etwa aufgrund von justify-content: spacing-between; ), diese L\u00fccke nur dann eine Auswirkung hat, wenn dieser Abstand kleiner wird.<\/p>\n
Dies ist nicht nur bei Flexbox der Fall; L\u00fccken funktionieren auch in Raster- und mehrspaltigen Layouts.<\/p>\n
Flexbox-Pr\u00e4fix<\/h2>\n
Flexbox ben\u00f6tigt bestimmte Herstellerpr\u00e4fixe, um m\u00f6glichst viele Browser zu unterst\u00fctzen. Dies beschr\u00e4nkt sich nicht nur auf das Voranstellen des Herstellerpr\u00e4fixes vor Attribute, sondern erfordert tats\u00e4chlich komplett andere Eigenschaftsnamen und -werte. Grund daf\u00fcr ist, dass sich die Flexbox-Spezifikation im Laufe der Zeit ge\u00e4ndert hat, wodurch \u00abalte\u00bb, \u00abZwischen-\u00bb und \u00abneue\u00bb Versionen entstanden sind.<\/p>\n
Die beste Vorgehensweise ist vielleicht, mit der neuen (und endg\u00fcltigen) Syntax zu schreiben und das CSS durch Autoprefixer laufen zu lassen, das die R\u00fccktaste sinnvoll nutzt.<\/p>\n
Alternativ dazu gibt es hier einen Sass @mixin, der bei einigen Pr\u00e4fixen hilft und Ihnen auch eine Vorstellung davon gibt, was zu tun ist:<\/p>\n
\n@mixin flexbox() {\r\ndisplay: -webkit-box;\r\ndisplay: -moz-box;\r\ndisplay: -ms-flexbox;\r\ndisplay: -webkit-flex;\r\ndisplay: flex;\r\n}\r\n@mixin flex($values) {\r\n-webkit-box-flex: $values;\r\n-moz-box-flex: $values;\r\n-webkit-flex: $values;\r\n-ms-flex: $values;\r\nflex: $values;\r\n}\r\n@mixin order($val) {\r\n-webkit-box-ordinal-group: $val; \r\n-moz-box-ordinal-group: $val; \r\n-ms-flex-order: $val; \r\n-webkit-order: $val; \r\norder: $val;\r\n}\r\n.wrapper {\r\n@include flexbox();\r\n}\r\n.item {\r\n@include flex(1 200px);\r\n@include order(2);\r\n}<\/code><\/pre>\n<\/div>\nBeispiele<\/h2>\n
Beginnen wir mit einem sehr einfachen Beispiel, das ein fast allt\u00e4gliches Problem l\u00f6st: perfekte Fokussierung. Mit Flexbox ist das denkbar einfach.<\/p>\n
\n<ul class=\"navigation\">\r\n<li><a href=\"#\">Home<\/a><\/li>\r\n<li><a href=\"#\">About<\/a><\/li>\r\n<li><a href=\"#\">Products<\/a><\/li>\r\n<li><a href=\"#\">Contact<\/a><\/li>\r\n<\/ul><\/code><\/pre>\n<\/div>\n\n.parent {\r\ndisplay: flex;\r\nheight: 300px; \/* Or whatever *\/\r\n}\r\n.child {\r\nwidth: 100px; \/* Or whatever *\/\r\nheight: 100px; \/* Or whatever *\/\r\nmargin: auto; \/* Magic! *\/\r\n}<\/code><\/pre>\n<\/div>\nDies liegt daran, dass ein automatisch festgelegter Rand in einem flexiblen Container zus\u00e4tzlichen Platz beansprucht. Durch die Festlegung eines automatischen Randes wird das Element daher perfekt auf beiden Achsen zentriert.<\/p>\n
Betrachten wir nun einige weitere Eigenschaften. Nehmen wir eine Liste mit sechs Elementen, die alle feste Abmessungen haben, aber automatisch skaliert werden k\u00f6nnen. Wir m\u00f6chten, dass sie gleichm\u00e4\u00dfig auf der horizontalen Achse verteilt sind, sodass beim \u00c4ndern der Browsergr\u00f6\u00dfe alles ohne zus\u00e4tzliche Medienanfragen korrekt skaliert wird.<\/p>\n
\n.flex-container {\r\n\/* We first create a flex layout context *\/\r\ndisplay: flex;\r\n\/* Then we define the flow direction \r\nand if we allow the items to wrap \r\n* Remember this is the same as:\r\n* flex-direction: row;\r\n* flex-wrap: wrap;\r\n*\/\r\nflex-flow: row wrap;\r\n\/* Then we define how is distributed the remaining space *\/\r\njustify-content: space-around;\r\n}<\/code><\/pre>\n<\/div>\nErledigt. Alles Weitere ist reine Stilfrage. Unten ist ein Beispielcode. Schau dir das Ganze mal auf CodePen an und \u00e4ndere die Fenstergr\u00f6\u00dfe, um zu sehen, was passiert.<\/p>\n
Versuchen wir etwas anderes. Stellen wir uns vor, wir haben ein rechtsb\u00fcndiges Navigationselement am oberen Rand unserer Website, m\u00f6chten es aber auf mittelgro\u00dfen Bildschirmen zentrieren und auf kleinen Ger\u00e4ten einspaltig anzeigen. Ganz einfach.<\/p>\n
\n\/* Large *\/\r\n.navigation {\r\ndisplay: flex;\r\nflex-flow: row wrap;\r\n\/* This aligns items to the end line on main-axis *\/\r\njustify-content: flex-end;\r\n}\r\n\/* Medium screens *\/\r\n@media all and (max-width: 800px) {\r\n.navigation {\r\n\/* When on medium sized screens, we center it by evenly distributing empty space around items *\/\r\njustify-content: space-around;\r\n}\r\n}\r\n\/* Small screens *\/\r\n@media all and (max-width: 500px) {\r\n.navigation {\r\n\/* On small screens, we are no longer using row direction but column *\/\r\nflex-direction: column;\r\n}\r\n}<\/code><\/pre>\n<\/div>\nLasst uns etwas Besseres ausprobieren und die Flexibilit\u00e4t flexibler Elemente nutzen! Wie w\u00e4re es mit einem Mobile-First-Layout mit drei Spalten, einem Header und Footer in voller Breite? Und das unabh\u00e4ngig von der Reihenfolge der Quelltexte.<\/p>\n
\n<div class=\"wrapper\">\r\n<header class=\"header\">Header<\/header>\r\n<article class=\"main\">\r\n<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.<\/p> \r\n<\/article>\r\n<aside class=\"aside aside-1\">Aside 1<\/aside>\r\n<aside class=\"aside aside-2\">Aside 2<\/aside>\r\n<footer class=\"footer\">Footer<\/footer>\r\n<\/div><\/code><\/pre>\n<\/div>\n\n\n.wrapper {\r\ndisplay: flex;\r\nflex-flow: row wrap;\r\n}\r\n\r\n\/* We tell all items to be 100% width, via flex-basis *\/\r\n.wrapper > * {\r\nflex: 1 100%;\r\n}\r\n\r\n\/* We rely on source order for mobile-first approach\r\n* in this case:\r\n* 1. header\r\n* 2. article\r\n* 3. aside 1\r\n* 4. aside 2\r\n* 5. footer\r\n*\/\r\n\/* Medium screens *\/\r\n@media all and (min-width: 600px) {\r\n\/* We tell both sidebars to share a row *\/\r\n.aside { flex: 1 auto; }\r\n}\r\n\/* Large screens *\/\r\n@media all and (min-width: 800px) {\r\n\/* We invert order of first sidebar and main\r\n* And tell the main element to take twice as much width as the other two sidebars\r\n*\/\r\n.main { flex: 3 0px; }\r\n.aside-1 { order: 1; }\r\n.main { order: 2; }\r\n.aside-2 { order: 3; }\r\n.footer { order: 4; }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/p>","protected":false},"excerpt":{"rendered":"Einf\u00fchrung in unseren umfassenden Leitfaden zum CSS-Flexbox-Layout. Dieser vollst\u00e4ndige Leitfaden erkl\u00e4rt alles \u00fcber Flexbox\u2026","protected":false},"author":1,"featured_media":15558,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363,375],"tags":[374,418],"class_list":{"0":"post-15555","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"category-375","10":"tag-css","11":"tag-website"},"yoast_head":"\n
\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox - \u0628\u0644\u0627\u06af ITPiran<\/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:\/\/www.itpiran.net\/blog\/de\/tutorials\/a-guide-to-flexbox\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639 \u0645\u0627 \u0628\u0631\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 CSS flexbox. \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f flexbox \u062a\u0648\u0636\u06cc\u062d…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/a-guide-to-flexbox\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-08T21:36:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox\",\"datePublished\":\"2024-05-08T21:36:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\"},\"wordCount\":96,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/09010518\\\/flex.jpg\",\"keywords\":[\"css\",\"website\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\",\"\u0648\u0628 \u0633\u0627\u06cc\u062a\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\",\"name\":\"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/09010518\\\/flex.jpg\",\"datePublished\":\"2024-05-08T21:36:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/09010518\\\/flex.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/09010518\\\/flex.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/de\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Der vollst\u00e4ndige Leitfaden zu Flexbox \u2013 ITPiran-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:\/\/www.itpiran.net\/blog\/de\/tutorials\/a-guide-to-flexbox\/","og_locale":"de_DE","og_type":"article","og_title":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639 \u0645\u0627 \u0628\u0631\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 CSS flexbox. \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f flexbox \u062a\u0648\u0636\u06cc\u062d…","og_url":"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/a-guide-to-flexbox\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-05-08T21:36:55+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"admin","Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox","datePublished":"2024-05-08T21:36:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/"},"wordCount":96,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","keywords":["css","website"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc","\u0648\u0628 \u0633\u0627\u06cc\u062a"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/","name":"Der vollst\u00e4ndige Leitfaden zu Flexbox \u2013 ITPiran-Blog","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","datePublished":"2024-05-08T21:36:55+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"ITPiran Blog","description":"Iranische Nachrichten und Artikel zum Thema nachhaltiger Handel","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Nachhaltiger iranischer Unternehmensblog","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"Administrator","url":"https:\/\/www.itpiran.net\/blog\/de\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/15555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/comments?post=15555"}],"version-history":[{"count":1,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/15555\/revisions"}],"predecessor-version":[{"id":15559,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/15555\/revisions\/15559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media\/15558"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media?parent=15555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/categories?post=15555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/tags?post=15555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}