{"id":83231,"date":"2022-04-05T11:50:46","date_gmt":"2022-04-05T11:50:46","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=83231"},"modified":"2025-12-28T10:30:59","modified_gmt":"2025-12-28T08:30:59","slug":"introducing-flexbox-containers","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/","title":{"rendered":"Introducing Elementor 3.6: Leverage Flexbox Containers To Create Top Performing and Responsive Designs"},"content":{"rendered":"\n<p>In Elementor 3.6, we introduce Flexbox Containers, a new lean layout structure that brings CSS Flexbox into the Editor. This structure allows you to achieve pixel-perfect <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\" title=\"How To Create A Responsive Website: Step-By-Step 2025 Guide\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"24991\">responsive<\/a> designs and highly advanced layouts quickly, and with a much slimmer markup, which improves performance significantly. This feature marks a transformative shift in how websites are built using Elementor\u2019s builder and is the foundation of a variety of additional, advanced capabilities.&nbsp;<\/p>\n\n\n\n<p>Flexbox Containers is a new building block in Elementor that empowers you to efficiently lay out, align and distribute items in a Container in a lightweight and responsive manner. With Flexbox Containers, you can place widgets directly inside the Container, as well as nest Containers infinitely. Then, you can control the layout and distribution of widgets within the Container, and adjust your content to every screen size, resulting in greater responsiveness, without compromising on speed, and without writing a single line of code.&nbsp;<\/p>\n\n\n\n<p>Following several months in the Dev Edition, and having implemented a lot of feedback from the community, we introduce Flexbox Containers as an Alpha Experiment.<\/p>\n\n\n\n<p>When the experiment is turned on, you will be able to add new Containers to a page instead of Sections, Columns, and Inner Sections. You\u2019ll also be able to add Containers to an existing page that was previously built with the Section-Column layout. With the experiment turned on, you will not be able to add new Sections or Columns to your pages.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Try It Out First in the Flexbox Containers Playground<\/h2>\n\n\n\n<p>Since Containers are a new way of building website structures in Elementor, this release is accompanied by additional education material, including the <a rel=\"noreferrer noopener\" href=\"https:\/\/playground.elementor.com\/demo\/flexbox\/#\" target=\"_blank\">Flexbox Containers Playground<\/a>. This playground includes 10 lessons, to help you get accustomed to designing layouts with Flexbox Containers.&nbsp;<\/p>\n\n\n\n<p><strong>Please Note<\/strong>: Experiments should be used with caution \u2014 features are introduced as Experiments when they include infrastructural changes that can impact your website in unforeseen ways. Learn more about experiments <a rel=\"noreferrer noopener\" href=\"https:\/\/elementor.com\/help\/elementor-experiments-2\/\" target=\"_blank\">here<\/a>.&nbsp;<\/p>\n\n\n\n<p>If you deactivate the experiment, every Container you create will be removed from your website, you will be able to restore them if you reactivate the experiment and roll back to a previous revision.&nbsp;&nbsp;<\/p>\n\n\n\n<p><br><strong>Important Note About Version 3.6 of Elementor<\/strong><\/p>\n\n\n\n<p>When Elementor 3.6 was first released on March 22nd, some users encountered technical issues due 3rd party plugin incompatibility. We immediately released a patch with Elementor 3.6.1, which should resolve most occurrences of this issue by reducing the error enforcement rules, and will allow the Editor to load.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What\u2019s the Difference Between Containers and Sections?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"2400\" height=\"1256\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/01-Containers-Sections-Difference.png\" alt=\"\" class=\"wp-image-83232\" \/><\/figure>\n\n\n\n<p>When you activate the Container experiment, you will be able to add Containers to your page, as well as drag Containers to the Canvas, or into another Container using the widget from the Editor Panel. You will also notice that the Container\u2019s borders are a darker shade of blue than the Section\u2019s borders.&nbsp;<\/p>\n\n\n\n<p>Below are a few additional, technical differences between Containers and Sections.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td><strong>Flexbox Containers Structure<\/strong><\/td><td><strong>Section-Column Structure<\/strong><\/td><\/tr><tr><td><strong>Adding it to your page<\/strong><\/td><td>Add a Container in the Editor with the \u2018+\u2019 symbol, or drag the Container widget to the Editor<\/td><td>Add a section in the editor with the \u2018+\u2019 symbol<\/td><\/tr><tr><td><strong>Widget location&nbsp;<\/strong><\/td><td>Directly inside a Container<\/td><td>In a Column, within a Section<\/td><\/tr><tr><td><strong>Widget Width<\/strong><\/td><td>Inline by default&nbsp;<\/td><td>Full width by default&nbsp;<\/td><\/tr><tr><td><strong>Nesting<\/strong><\/td><td>Infinite Nesting&nbsp;<\/td><td>One Inner Section&nbsp;<\/td><\/tr><tr><td><strong>Widget direction&nbsp;<\/strong><\/td><td>Column, Row, Column Reverse, or Row Reverse<\/td><td>Column, or Inline Positioning<\/td><\/tr><tr><td><strong>Responsive design<\/strong><\/td><td>Custom order of widgets or Containers to each device<\/td><td>Reverse Column or Duplicate Sections<\/td><\/tr><tr><td><strong>Alignment&nbsp;<\/strong><\/td><td>Flex-Start, Flex-Center, Flex-End<\/td><td>Left, Center, Right<\/td><\/tr><tr><td><strong>Hyperlinking<\/strong><\/td><td>Wrap the container to hyperlink it<\/td><td>Hyperlink a widget, not a section or column<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Flexbox Containers Will Transform How You Build Websites<\/h2>\n\n\n\n<p>With Flexbox Containers you can quickly create simple and advanced layouts, and improve user experience and performance. Below are a few examples of how:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create Pixel-Perfect Layouts With a Lean Markup, Quickly<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2400\" height=\"1256\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/02-Performance.png\" alt=\"\" class=\"wp-image-83233\" \/><\/figure>\n\n\n\n<p>Previously, if you wanted to create a website layout that included a number of widgets in a row, you would have to either set the width of each widget to inline, which creates a redundant workflow or create a section with a number of columns inside it, which harms performance. For example, if you wanted to create a logo section with 4 logos in a row, with sections and columns you would either have to set the width of each logo to inline, or create a section with 4 columns and place a logo in each one. <\/p>\n\n\n\n<p>With Flexbox Containers, you can use a single container, add all the logos you want, and change the Container\u2019s direction from column to row, to see all your logos in one row, in a single click. You can also leverage the Justify Content control to distribute the logos as you\u2019d like within the Container.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fully Customize Your Design to Each Breakpoint<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2400\" height=\"1256\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/03-Breakpoint.png\" alt=\"\" class=\"wp-image-83234\" \/><\/figure>\n\n\n\n<p>As you design your website, it is important to consider what it looks like on different devices. A design that works on desktop may not provide the same user experience on a smaller screen, like mobile. Leveraging the power of <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\" title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"31618\">CSS<\/a> Flexbox, you can customize your website\u2019s design to each device. You can change the direction, order, alignment and distribution of items within your Container for each device, without having to create duplicate Containers. This results in an improved user experience, without affecting your website\u2019s performance.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Facilitate Intuitive User Experiences With Clickable Containers<\/h3>\n\n\n\n<p>Some designs make visitors think that the entire content area will be clickable &#8211; such as a card. However, when they try clicking it, they have difficulty finding the area of the card that is actually clickable. With Containers, you can wrap the entire Container and add a link to it, making the entire Container clickable, which creates a highly intuitive experience for your visitors.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2400\" height=\"1256\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/04-Clickable-Containers.png\" alt=\"\" class=\"wp-image-83237\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Nest Containers Infinitely To Create Advanced Layouts<\/h3>\n\n\n\n<p>Flexbox Containers empower you to create advanced layouts faster. While with the Section-column layout, you would only be able to place a single inner-Section within a Column, with Flexbox Containers you can Nest Containers infinitely. Nesting Containers will allow you to set different directions and alignments for each one, to quickly create highly advanced layouts.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2400\" height=\"1256\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/05-Nested-Containers.png\" alt=\"\" class=\"wp-image-83238\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Harness the Power of CSS Flexbox in Elementor\u2019s Editor<\/h2>\n\n\n\n<p>Flexbox Containers, introduced as an experiment, represent a quantum leap in design flexibility. With the experiment activated, you will be able to leverage all the benefits of CSS Flexbox in Elementor\u2019s Editor, which will empower you to create sophisticated designs much faster, and with much less DOM output. Aside from the immediate design flexibility benefits, Containers are also the foundation of several upcoming exciting features, so stay tuned, and try it out first in the <a rel=\"noreferrer noopener\" href=\"https:\/\/playground.elementor.com\/demo\/flexbox\/#\" target=\"_blank\">Playground<\/a>.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Elementor 3.6 marks the first step in a series of infrastructural updates that will transform the way you build websites. <\/p>\n","protected":false},"author":2024207,"featured_media":83241,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[44,15],"tags":[173],"marketing_persona":[],"marketing_intent":[49],"class_list":["post-83231","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-new-features","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducing Elementor 3.6: Leverage Flexbox Containers To Create Top Performing and Responsive Designs<\/title>\n<meta name=\"description\" content=\"Elementor 3.6 marks the first step in a series of infrastructural updates that will transform the way you build websites, starting with Flexbox Containers. Using this feature will enable you to create pixel-perfect, responsive, and lean designs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Elementor 3.6: Leverage Flexbox Containers To Create Top Performing and Responsive Designs\" \/>\n<meta property=\"og:description\" content=\"Elementor 3.6 marks the first step in a series of infrastructural updates that will transform the way you build websites, starting with Flexbox Containers. Using this feature will enable you to create pixel-perfect, responsive, and lean designs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-05T11:50:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-28T08:30:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2400\" \/>\n\t<meta property=\"og:image:height\" content=\"1256\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Gabriella Laster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gabriella Laster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/\"},\"author\":{\"name\":\"Gabriella Laster\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a\"},\"headline\":\"Introducing Elementor 3.6: Leverage Flexbox Containers To Create Top Performing and Responsive Designs\",\"datePublished\":\"2022-04-05T11:50:46+00:00\",\"dateModified\":\"2025-12-28T08:30:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/\"},\"wordCount\":1133,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png\",\"keywords\":[\"Video\"],\"articleSection\":[\"Elementor\",\"New Features\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/\",\"url\":\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/\",\"name\":\"Introducing Elementor 3.6: Leverage Flexbox Containers To Create Top Performing and Responsive Designs\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png\",\"datePublished\":\"2022-04-05T11:50:46+00:00\",\"dateModified\":\"2025-12-28T08:30:59+00:00\",\"description\":\"Elementor 3.6 marks the first step in a series of infrastructural updates that will transform the way you build websites, starting with Flexbox Containers. Using this feature will enable you to create pixel-perfect, responsive, and lean designs.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png\",\"width\":2400,\"height\":1256},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New Features\",\"item\":\"https:\/\/elementor.com\/blog\/category\/new-features\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Introducing Elementor 3.6: Leverage Flexbox Containers To Create Top Performing and Responsive Designs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a\",\"name\":\"Gabriella Laster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g\",\"caption\":\"Gabriella Laster\"},\"description\":\"Gabriella is a Product Marketing Director at Elementor, where she helps bridge the gap between complex web technology and seamless user experiences. With a decade of experience in marketing and entrepreneurship, she\u2019s passionate about empowering creators to build their digital dreams.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/gabriellal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introducing Elementor 3.6: Leverage Flexbox Containers To Create Top Performing and Responsive Designs","description":"Elementor 3.6 marks the first step in a series of infrastructural updates that will transform the way you build websites, starting with Flexbox Containers. Using this feature will enable you to create pixel-perfect, responsive, and lean designs.","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:\/\/elementor.com\/blog\/introducing-flexbox-containers\/","og_locale":"en_US","og_type":"article","og_title":"Introducing Elementor 3.6: Leverage Flexbox Containers To Create Top Performing and Responsive Designs","og_description":"Elementor 3.6 marks the first step in a series of infrastructural updates that will transform the way you build websites, starting with Flexbox Containers. Using this feature will enable you to create pixel-perfect, responsive, and lean designs.","og_url":"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2022-04-05T11:50:46+00:00","article_modified_time":"2025-12-28T08:30:59+00:00","og_image":[{"width":2400,"height":1256,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","type":"image\/png"}],"author":"Gabriella Laster","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Gabriella Laster","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/"},"author":{"name":"Gabriella Laster","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a"},"headline":"Introducing Elementor 3.6: Leverage Flexbox Containers To Create Top Performing and Responsive Designs","datePublished":"2022-04-05T11:50:46+00:00","dateModified":"2025-12-28T08:30:59+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/"},"wordCount":1133,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","keywords":["Video"],"articleSection":["Elementor","New Features"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/","url":"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/","name":"Introducing Elementor 3.6: Leverage Flexbox Containers To Create Top Performing and Responsive Designs","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","datePublished":"2022-04-05T11:50:46+00:00","dateModified":"2025-12-28T08:30:59+00:00","description":"Elementor 3.6 marks the first step in a series of infrastructural updates that will transform the way you build websites, starting with Flexbox Containers. Using this feature will enable you to create pixel-perfect, responsive, and lean designs.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","width":2400,"height":1256},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/introducing-flexbox-containers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"New Features","item":"https:\/\/elementor.com\/blog\/category\/new-features\/"},{"@type":"ListItem","position":3,"name":"Introducing Elementor 3.6: Leverage Flexbox Containers To Create Top Performing and Responsive Designs"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a","name":"Gabriella Laster","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g","caption":"Gabriella Laster"},"description":"Gabriella is a Product Marketing Director at Elementor, where she helps bridge the gap between complex web technology and seamless user experiences. With a decade of experience in marketing and entrepreneurship, she\u2019s passionate about empowering creators to build their digital dreams.","url":"https:\/\/elementor.com\/blog\/author\/gabriellal\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/83231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/2024207"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=83231"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/83231\/revisions"}],"predecessor-version":[{"id":149043,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/83231\/revisions\/149043"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/83241"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=83231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=83231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=83231"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=83231"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=83231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}