\nItems are placed along the main axis (from the main start to the main end) or the cross axis (from the cross start to the cross end).<\/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
- Main axis \u2013 The main axis of the flex container is the primary axis along which flex items are placed. Be careful, it is not necessarily horizontal. It depends on the flex-direction property (see below).<\/li>\n
- Main Start | Main End \u2013 Flexible items are placed inside the container starting from the main start and going to the main end.<\/li>\n
- Original size \u2013 The width or height of a flex item, whichever is in the original dimension, is the original size of the item. The flex item's original size property is either the "width" or "height" property, whichever is in the original dimension.<\/li>\n
- Cross axis \u2013 The axis perpendicular to the principal axis is called the cross axis. Its direction depends on the direction of the principal axis.<\/li>\n
- Cross-start | cross-end \u2013 Flex lines are filled with items and placed in the container starting from the cross-start side of the flex container and moving towards the cross-end.<\/li>\n
- Cross Size \u2013 The width or height of a flex item, whichever is in the cross dimension, is the cross size of the item. The cross size property is whichever is in the cross dimension, either \u201cwidth\u201d or \u201cheight\u201d.<\/li>\n<\/ul>\n
Flexbox Features<\/h2>\n
Properties for parents
\n(container)<\/h5>\nDisplay<\/p>\n
This defines a flexible container. Depending on the given value, inline or block. It provides a flexible context for all its direct children.<\/p>\n
\n.container {\r\ndisplay: flex; \/* or inline-flex *\/\r\n}<\/code><\/pre>\n<\/div>\nflex-direction<\/h5>\n
\nThis creates the primary axis, thus determining the direction in which flex items are placed within the flex container. Flexbox (apart from optional wrapping) is a unidirectional layout concept. Think of flex items as being mostly in horizontal rows or vertical columns.<\/p>\n\n.container {\r\nflex-direction: row | row-reverse | column | column-reverse;\r\n}<\/code><\/pre>\n<\/div>\n- \n
- ROW (default): Left to right in ltr. Right to left in rtl<\/li>\n
- row-reverse: right-to-left in ltr. left-to-right in rtl<\/li>\n
- COLUMN: Like row but from top to bottom<\/li>\n
- Column-reverse: Like reverse row but from bottom to top<\/li>\n<\/ul>\n
Flex Wrap<\/h5>\n
\nBy default, flexible items all try to fit in one line. You can change that and allow items to be closed with this property if needed.<\/p>\n\n.container {\r\nflex-wrap: nowrap | wrap | wrap-reverse;\r\n}<\/code><\/pre>\n<\/div>\n- \n
- nowrap (default): All flex items will be wrapped on one line<\/li>\n
- wrap: Flexible items are wrapped across multiple lines, top to bottom.<\/li>\n
- wrap-reverse: Flexible items are wrapped on multiple lines from bottom to top.<\/li>\n<\/ul>\n
FLEX-Flow<\/h5>\n
This is a shorthand for the flex-direction and flex-width properties, which together specify the main and cross axes of the flex container. The default value is row nowrap.<\/p>\n
\n.container {\r\nflex-flow: column wrap;\r\n}<\/code><\/pre>\n<\/div>\nJustify-Content<\/h5>\n
\nThis specifies the alignment along the main axis. It helps distribute excess white space when all flexible items in a line are inflexible or flexible but have reached their maximum size. It also provides some control over the alignment of items when items overflow the line.<\/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 (default): Items are packed towards the start of the flex direction.<\/li>\n
- flex-end: Items are packaged towards the end of the flex direction.<\/li>\n
- START: Items are packed towards the start of the writing mode direction.<\/li>\n
- END: Items are packed towards the end of the write mode direction.<\/li>\n
- LEFT: Items are packed towards the left edge of the container, unless it doesn't make sense with the flex direction, then it acts like start.<\/li>\n
- RIGHT: Items are packed towards the right edge of the container, unless it makes sense to be flexible in that direction, then it acts like the end.<\/li>\n
- CENTER: Items are centered along the line.<\/li>\n
- Space-Between: Items are evenly distributed in the line. The first item is at the start line, the last item is at the finish line.<\/li>\n
- Space-Around: Items are evenly distributed in a line with equal space around them. Note that visually the spaces are not equal, as all items have equal space on both sides. The first item will have one unit of space at the edge of the container, but will have two units of space between the next item because the next item has its own spacing that is applied.<\/li>\n
- Space-Evenly: Items are distributed in such a way that the distance between any two items (and the distance to the edges) is equal.<\/li>\n<\/ul>\n
There are also two additional keywords you can pair with these values: safe and insecure. Using safe ensures that no matter how you do this type of positioning, you can't push an element so far off the page (e.g., off the top of the page) that the content can't be scrolled through (known as "data loss").<\/p>\n
Align-Items<\/h5>\n
\nThis defines the default behavior for how flexible items are arranged along the cross axis in the current line. Think of it as the content justification version for the cross axis (perpendicular to the main axis).<\/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
- STREtch (default): Stretch to fill the container (still respects min\/max width)<\/li>\n
- flex-start \/ start \/ self-start: Items are placed at the beginning of the cross-axis. The difference between these is subtle and is about respecting flex direction rules or writing mode rules.<\/li>\n
- flex-end \/ end \/ self-end: Items are placed at the end of the cross-axis. The difference is again subtle and is about respecting flex direction rules versus writing mode rules.<\/li>\n
- CENTER: Items are located on the cross axis<\/li>\n
- BASEline: Items are aligned like their baselines<\/li>\n<\/ul>\n
ALign-Content<\/h5>\n
\nWhen there is extra space on the cross axis, it aligns the flexible container lines inside, similar to how justify-content aligns individual items on the main axis.<\/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 (default): Items are packed in their default position as if no value was set.<\/li>\n
- flex-start \/ start: Items wrapped to the beginning of the container. flex-start (with more support) indicates the flex direction while start respects the write mode direction.<\/li>\n
- flex-end \/ end: Items that are wrapped to the end of the container. (More support) flex-end indicates the flex direction while end respects the write mode direction.<\/li>\n
- CENTER: Items that are in the center of the container<\/li>\n
- Space-Between: Items are evenly spaced. The first line is at the beginning of the container and the last line is at the end of the container.<\/li>\n
- Space-Around: Items are evenly distributed with equal space around each line.<\/li>\n
- Space-Evenly: Items are evenly distributed with equal space around them<\/li>\n
- stretch: Lines are stretched to occupy the remaining space.<\/li>\n<\/ul>\n
Gap, Row-Gap, Column-Gap<\/h5>\n
\nThe gap property explicitly controls the space between flexible items. This spacing only applies between items, not on the outer edges.<\/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>\nThis behavior can be thought of as minimal guttering, such that if the gutter is somehow larger (due to something like justify-content: spacing-between; ) then this gap will only have an effect when that space becomes smaller.<\/p>\n
This is not exclusive to flexbox, gaps also work in grid and multi-column layouts.<\/p>\n
Flexbox prefix<\/h2>\n
Flexbox requires some vendor prefixes to support the most possible browsers. This doesn't just involve prepending attributes with the vendor prefix, but actually having completely different property names and values. This is because the Flexbox specification has changed over time, creating "old", "tweener" and "new" versions.<\/p>\n
Perhaps the best way to handle this is to write with the new (and final) syntax and run your CSS through Autoprefixer, which makes good use of backspaces.<\/p>\n
Alternatively, here's a Sass @mixin to help with some prefixes, which will also give you an idea of what kind of things to do:<\/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>\nExamples<\/h2>\n
Let's start with a very, very simple example, solving an almost daily problem: perfect focus. It couldn't be simpler if you're using flexbox.<\/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>\nThis is due to the fact that an auto-set margin in a flexible container will absorb extra space. So setting an auto-set margin will make the item perfectly centered on both axes.<\/p>\n
Now let's use a few more properties. Consider a list of 6 items, all of which have fixed dimensions, but can be auto-sized. We want them to be evenly distributed on the horizontal axis so that when we resize the browser, everything scales nicely without any media requests.<\/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>\nDone. Everything else is just a style concern. Below is a pen shown. Be sure to go to CodePen and resize your windows to see what happens.<\/p>\n
Let's try something else. Imagine we have a right-aligned navigation element at the top of our website, but we want to center it on medium-sized screens and have a single column on small devices. It's simple enough.<\/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>\nLet's try something better by playing with the flexibility of flexible items! What about a mobile-first 3-column layout with a full-width header and footer. And independent of source order.<\/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":"Introduction to our comprehensive guide to CSS flexbox layouts. This complete guide explains everything about 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\/en\/tutorials\/a-guide-to-flexbox\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\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\/en\/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=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\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\":\"en-US\",\"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\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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\":\"en-US\"},{\"@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\":\"en-US\",\"@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\\\/en\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Complete Guide to Flexbox - 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\/en\/tutorials\/a-guide-to-flexbox\/","og_locale":"en_US","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\/en\/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":{"Written by":"admin","Est. reading time":"3 minutes"},"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":"en-US","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":"The Complete Guide to Flexbox - 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":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@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":"Iranian Sustainable Trade News and Articles","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":"en-US"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Sustainable Iranian Business Blog","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@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\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts\/15555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/comments?post=15555"}],"version-history":[{"count":1,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts\/15555\/revisions"}],"predecessor-version":[{"id":15559,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts\/15555\/revisions\/15559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/media\/15558"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/media?parent=15555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/categories?post=15555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/tags?post=15555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}