{"id":26984,"date":"2017-10-07T23:06:09","date_gmt":"2017-10-07T20:06:09","guid":{"rendered":"http:\/\/kamil-abzalov.com\/tutorials\/css-flexbox\/"},"modified":"2020-04-10T23:40:57","modified_gmt":"2020-04-10T20:40:57","slug":"css-flexbox","status":"publish","type":"post","link":"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-flexbox\/","title":{"rendered":"CSS. Flexbox"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_fullwidth_header title=&#8221;CSS. Flexbox&#8221; _builder_version=&#8221;3.16&#8243; button_one_letter_spacing_hover=&#8221;0&#8243; button_two_letter_spacing_hover=&#8221;0&#8243; button_one_text_size__hover_enabled=&#8221;off&#8221; button_two_text_size__hover_enabled=&#8221;off&#8221; button_one_text_color__hover_enabled=&#8221;off&#8221; button_two_text_color__hover_enabled=&#8221;off&#8221; button_one_border_width__hover_enabled=&#8221;off&#8221; button_two_border_width__hover_enabled=&#8221;off&#8221; button_one_border_color__hover_enabled=&#8221;off&#8221; button_two_border_color__hover_enabled=&#8221;off&#8221; button_one_border_radius__hover_enabled=&#8221;off&#8221; button_two_border_radius__hover_enabled=&#8221;off&#8221; button_one_letter_spacing__hover_enabled=&#8221;on&#8221; button_one_letter_spacing__hover=&#8221;0&#8243; button_two_letter_spacing__hover_enabled=&#8221;on&#8221; button_two_letter_spacing__hover=&#8221;0&#8243; button_one_bg_color__hover_enabled=&#8221;off&#8221; button_two_bg_color__hover_enabled=&#8221;off&#8221;][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_row admin_label=&#8221;row&#8221; _builder_version=&#8221;3.25&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; custom_padding=&#8221;0px|||&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_dcsbcm_divi_breadcrumbs_module homebreadcrumbtext=&#8221;Home&#8221; hide_currentbreadcrumb=&#8221;off&#8221; _builder_version=&#8221;3.12&#8243; custom_padding=&#8221;0px|||&#8221; hover_enabled=&#8221;0&#8243; fontsbreadcrumbs_font_size_tablet=&#8221;51&#8243; fontsbreadcrumbs_line_height_tablet=&#8221;2&#8243; fontsseperator_font_size_tablet=&#8221;51&#8243; fontsseperator_line_height_tablet=&#8221;2&#8243; fontsbreadcrumblinks_font_size_tablet=&#8221;51&#8243; fontsbreadcrumblinks_line_height_tablet=&#8221;2&#8243;][\/et_pb_dcsbcm_divi_breadcrumbs_module][et_pb_text _builder_version=&#8221;3.27.4&#8243; border_style=&#8221;solid&#8221;]One of my describer asked me i on <a href=\"https:\/\/www.youtube.com\/user\/kamabzalov\">my youtube chanel<\/a> to make video tutorial on flexbox CSS topic.Today I am introducing my new tutorial with great pleasure.<br \/>\n[\/et_pb_text][et_pb_video src=&#8221;https:\/\/www.youtube.com\/watch?v=5SpH3ASz2ws&#8221; disabled_on=&#8221;off|off|off&#8221; _builder_version=&#8221;3.0.77&#8243;][\/et_pb_video][et_pb_text _builder_version=&#8221;3.27.4&#8243; border_style=&#8221;solid&#8221;]Be careful before using flexbox. This approach is supported by modern browsers. You must understand two principles while using flexbox &#8211; axis and relationship between elements (parent and child). Blocks in flex container may be located in row or in column. That&#8217;s why yuo must consider two axis &#8211; main and transverse. Main axis always repeat blocks direction. Transverse is always perpendicular to the main axis. First of all you must assign display: flex to parent container. Next you can use other flex rules based on your needs. There are the list of rules and their importance below. You can see more examples in video or in code below.<\/p>\n<p>For container:<br \/>\ndisplay: flex;<br \/>\nflex-direction &#8211; child blocks direction (row or column)<br \/>\njustify-content &#8211; alignment of block based on main axis.<br \/>\nalign-items &#8211; alignment of block based on transverse axis.<br \/>\nalign-content &#8211; vertical alignment of block (works only with flex-wrap rule)<br \/>\nflex-wrap &#8211; lets multi rows in parent container.<\/p>\n<p>For children:<br \/>\nflex-basis &#8211; basis size of block.<br \/>\nflex-grow &#8211; size based on other siblings blocks.<br \/>\nflex-shrink &#8211; size compression based on siblings blocks.<br \/>\nflex &#8211; universal rule. It units flex-grow, flex-basis, flex-shrink.<br \/>\norder &#8211; defines order of blocks in parent. It has zero value by default.<br \/>\n[\/et_pb_text][et_pb_dmb_code_snippet title=&#8221;Code lesson (HTML)&#8221; code=&#8221;PCFET0NUWVBFIGh0bWw+CjxodG1sPgogICAgPGhlYWQ+CiAgICAgICAgPG1ldGEgY2hhcnNldD0idXRmLTgiPgogICAgICAgIDx0aXRsZT48L3RpdGxlPgogICAgICAgIDxzdHlsZSBtZWRpYT0ic2NyZWVuIj4KICAgICAgICAgICAgLnBhcmVudCB7CiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7CiAgICAgICAgICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgICAgICAgICAgZmxleC1kaXJlY3Rpb246IHJvdzsKICAgICAgICAgICAgICAgIGhlaWdodDogNzAwcHg7CiAgICAgICAgICAgICAgICBmbGV4LXdyYXA6IHdyYXA7CiAgICAgICAgICAgICAgICBhbGlnbi1jb250ZW50OiBjZW50ZXI7CiAgICAgICAgICAgICAgICAvKmp1c3RpZnktY29udGVudDogZmxleC1zdGFydDsqLwogICAgICAgICAgICB9CgogICAgICAgICAgICAub25lIHsKICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IHJlZDsKCiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIC50d28gewogICAgICAgICAgICAgICAgYmFja2dyb3VuZDogcHVycGxlOwoKICAgICAgICAgICAgfQoKICAgICAgICAgICAgLnRocmVlIHsKICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IGdyZWVuOwoKICAgICAgICAgICAgfQogICAgICAgIDwvc3R5bGU+CiAgICA8L2hlYWQ+CiAgICA8Ym9keT4KCiAgICAgICAgPGRpdiBjbGFzcz0icGFyZW50Ij4KICAgICAgICAgICAgPGRpdiBjbGFzcz0ib25lIj7QkdC70L7QuiAxPC9kaXY+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9InR3byI+0JHQu9C+0LogMjwvZGl2PgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJ0aHJlZSI+0JHQu9C+0LogMzwvZGl2PgogICAgICAgIDwvZGl2PgoKICAgIDwvYm9keT4KPC9odG1sPg==&#8221; admin_label=&#8221;\u041a\u043e\u0434 \u0443\u0440\u043e\u043a\u0430&#8221; style=&#8221;docco&#8221; linenums=&#8221;on&#8221; usetabwidth=&#8221;on&#8221; tabwidth=&#8221;4&#8243; _builder_version=&#8221;4.4.2&#8243; hover_enabled=&#8221;0&#8243;]PCFET0NUWVBFIGh0bWw+CjxodG1sPgogICAgPGhlYWQ+CiAgICAgICAgPG1ldGEgY2hhcnNldD0idXRmLTgiPgogICAgICAgIDx0aXRsZT48L3RpdGxlPgogICAgICAgIDxzdHlsZSBtZWRpYT0ic2NyZWVuIj4KICAgICAgICAgICAgLnBhcmVudCB7CiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7CiAgICAgICAgICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgICAgICAgICAgZmxleC1kaXJlY3Rpb246IHJvdzsKICAgICAgICAgICAgICAgIGhlaWdodDogNzAwcHg7CiAgICAgICAgICAgICAgICBmbGV4LXdyYXA6IHdyYXA7CiAgICAgICAgICAgICAgICBhbGlnbi1jb250ZW50OiBjZW50ZXI7CiAgICAgICAgICAgICAgICAvKmp1c3RpZnktY29udGVudDogZmxleC1zdGFydDsqLwogICAgICAgICAgICB9CgogICAgICAgICAgICAub25lIHsKICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IHJlZDsKCiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIC50d28gewogICAgICAgICAgICAgICAgYmFja2dyb3VuZDogcHVycGxlOwoKICAgICAgICAgICAgfQoKICAgICAgICAgICAgLnRocmVlIHsKICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IGdyZWVuOwoKICAgICAgICAgICAgfQogICAgICAgIDwvc3R5bGU+CiAgICA8L2hlYWQ+CiAgICA8Ym9keT4KCiAgICAgICAgPGRpdiBjbGFzcz0icGFyZW50Ij4KICAgICAgICAgICAgPGRpdiBjbGFzcz0ib25lIj7QkdC70L7QuiAxPC9kaXY+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9InR3byI+0JHQu9C+0LogMjwvZGl2PgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJ0aHJlZSI+0JHQu9C+0LogMzwvZGl2PgogICAgICAgIDwvZGl2PgoKICAgIDwvYm9keT4KPC9odG1sPg==[\/et_pb_dmb_code_snippet][et_pb_comments _builder_version=&#8221;4.4.2&#8243; custom_margin=&#8221;30px||||false|false&#8221; hover_enabled=&#8221;0&#8243;][\/et_pb_comments][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of my describer asked me i on my youtube chanel to make video tutorial on flexbox CSS topic.Today I am introducing my new tutorial with great pleasure. Be careful before using flexbox. This approach is supported by modern browsers. You must understand two principles while using flexbox &#8211; axis and relationship between elements (parent [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[257,219],"tags":[259],"class_list":["post-26984","post","type-post","status-publish","format-standard","hentry","category-html-css","category-tutorials","tag-css-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS. Flexbox - Kamil Abzalov&#039;s blog<\/title>\n<meta name=\"description\" content=\"In this tutorial we&#039;ll consider the new way in block html layout - flexbox. CSS3 supports flexbox in all modern browsers versions, beginning from IE10.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-flexbox\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS. Flexbox - Kamil Abzalov&#039;s blog\" \/>\n<meta property=\"og:description\" content=\"In this tutorial we&#039;ll consider the new way in block html layout - flexbox. CSS3 supports flexbox in all modern browsers versions, beginning from IE10.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-flexbox\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/kamabzalov\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-07T20:06:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-10T20:40:57+00:00\" \/>\n<meta name=\"author\" content=\"Kamil&#039; Abzalov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"CSS. Flexbox\" \/>\n<meta name=\"twitter:description\" content=\"In this tutorial we&#039;ll consider the new way in block html layout - flexbox. CSS3 supports flexbox in all modern browsers versions, beginning from IE10.\" \/>\n<meta name=\"twitter:creator\" content=\"@kamabzalov\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kamil&#039; Abzalov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/html-css\\\/css-flexbox\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/html-css\\\/css-flexbox\\\/\"},\"author\":{\"name\":\"Kamil' Abzalov\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"headline\":\"CSS. Flexbox\",\"datePublished\":\"2017-10-07T20:06:09+00:00\",\"dateModified\":\"2020-04-10T20:40:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/html-css\\\/css-flexbox\\\/\"},\"wordCount\":751,\"commentCount\":0,\"keywords\":[\"css\"],\"articleSection\":[\"HTML and CSS\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/html-css\\\/css-flexbox\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/html-css\\\/css-flexbox\\\/\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/html-css\\\/css-flexbox\\\/\",\"name\":\"CSS. Flexbox - Kamil Abzalov's blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\"},\"datePublished\":\"2017-10-07T20:06:09+00:00\",\"dateModified\":\"2020-04-10T20:40:57+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"description\":\"In this tutorial we'll consider the new way in block html layout - flexbox. CSS3 supports flexbox in all modern browsers versions, beginning from IE10.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/html-css\\\/css-flexbox\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/html-css\\\/css-flexbox\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/tutorials\\\/html-css\\\/css-flexbox\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS. Flexbox\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"name\":\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kamil-abzalov.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\",\"name\":\"Kamil' Abzalov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"caption\":\"Kamil' Abzalov\"},\"sameAs\":[\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"https:\\\/\\\/www.facebook.com\\\/kamabzalov\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kamabzalov\",\"https:\\\/\\\/x.com\\\/kamabzalov\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/kamabzalov\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS. Flexbox - Kamil Abzalov's blog","description":"In this tutorial we'll consider the new way in block html layout - flexbox. CSS3 supports flexbox in all modern browsers versions, beginning from IE10.","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:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-flexbox\/","og_locale":"en_US","og_type":"article","og_title":"CSS. Flexbox - Kamil Abzalov's blog","og_description":"In this tutorial we'll consider the new way in block html layout - flexbox. CSS3 supports flexbox in all modern browsers versions, beginning from IE10.","og_url":"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-flexbox\/","og_site_name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","article_author":"https:\/\/www.facebook.com\/kamabzalov","article_published_time":"2017-10-07T20:06:09+00:00","article_modified_time":"2020-04-10T20:40:57+00:00","author":"Kamil' Abzalov","twitter_card":"summary_large_image","twitter_title":"CSS. Flexbox","twitter_description":"In this tutorial we'll consider the new way in block html layout - flexbox. CSS3 supports flexbox in all modern browsers versions, beginning from IE10.","twitter_creator":"@kamabzalov","twitter_misc":{"Written by":"Kamil' Abzalov","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-flexbox\/#article","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-flexbox\/"},"author":{"name":"Kamil' Abzalov","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"headline":"CSS. Flexbox","datePublished":"2017-10-07T20:06:09+00:00","dateModified":"2020-04-10T20:40:57+00:00","mainEntityOfPage":{"@id":"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-flexbox\/"},"wordCount":751,"commentCount":0,"keywords":["css"],"articleSection":["HTML and CSS","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-flexbox\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-flexbox\/","url":"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-flexbox\/","name":"CSS. Flexbox - Kamil Abzalov's blog","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/#website"},"datePublished":"2017-10-07T20:06:09+00:00","dateModified":"2020-04-10T20:40:57+00:00","author":{"@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"description":"In this tutorial we'll consider the new way in block html layout - flexbox. CSS3 supports flexbox in all modern browsers versions, beginning from IE10.","breadcrumb":{"@id":"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-flexbox\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-flexbox\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-flexbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/kamil-abzalov.com\/en\/"},{"@type":"ListItem","position":2,"name":"CSS. Flexbox"}]},{"@type":"WebSite","@id":"https:\/\/kamil-abzalov.com\/#website","url":"https:\/\/kamil-abzalov.com\/","name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kamil-abzalov.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600","name":"Kamil' Abzalov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","caption":"Kamil' Abzalov"},"sameAs":["https:\/\/kamil-abzalov.com\/","https:\/\/www.facebook.com\/kamabzalov","https:\/\/www.linkedin.com\/in\/kamabzalov","https:\/\/x.com\/kamabzalov","https:\/\/www.youtube.com\/user\/kamabzalov"]}]}},"_links":{"self":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/26984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/comments?post=26984"}],"version-history":[{"count":14,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/26984\/revisions"}],"predecessor-version":[{"id":31941,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/26984\/revisions\/31941"}],"wp:attachment":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/media?parent=26984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/categories?post=26984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/tags?post=26984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}