{"id":27392,"date":"2022-11-07T12:00:00","date_gmt":"2022-11-07T10:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=27392"},"modified":"2024-01-10T16:57:54","modified_gmt":"2024-01-10T14:57:54","slug":"container-element","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/container-element\/","title":{"rendered":"How do I learn about Flexbox Containers?"},"content":{"rendered":"\n<p>Flexbox containers use the power of flexbox CSS to make building websites faster, while giving you more freedom than ever to create exactly the design you want. Containers also provide improved page loading and greater responsive control.   <\/p>\n\n\n\n<p>This is done by giving you the ability to alter each items\u2019 width, height, and order, to best fill the available space of the container.&nbsp;This feature will replace the current section, column, and inner section functionality of the Elementor editor.<\/p>\n\n\n\n<p>Flexbox Containers are currently a <a href=\"https:\/\/elementor.com\/help\/elementor-experiments-2\/\">release candidate<\/a>, you may need to <a href=\"https:\/\/elementor.com\/help\/elementor-experiments-2\/\">activate them<\/a> if you would like to use them on existing sites. \u00a0<\/p>\n\n\n\n<p>You can also set up a sandbox website on your local machine or development server. This will let you learn how to best use containers in your designs without any worry about messing up your current live environment.<\/p>\n\n\n\n<p>For a comprehensive understanding of containers, check out the articles below and you&#8217;ll be on your way to becoming a Flexbox container expert. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Flexbox Container video playlist<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Introduction to Containers\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/Kj21JRT6qpI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Basics:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/youtu.be\/Kj21JRT6qpI\">Intro to Containers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/youtu.be\/ICI4FAApKX0\">Building a webpage using containers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/youtu.be\/_tEFK_Mgeaw\">Introduction to layout<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/youtu.be\/PAUvjHNAJRw\">Creating the layout<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/youtu.be\/8o7mg09OEjA\">How many containers should you use<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Settings<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/youtu.be\/zCwV_jbNSQg\">Container settings<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/youtu.be\/SJGmg_sX9zE\">Item settings<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/youtu.be\/k6NeL7-zBQM\">Move and reuse<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/youtu.be\/xI7Fh6PtXek\">Responsiveness<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Articles<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">What is a Flexbox Container?&nbsp;<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/elementor.com\/help\/what-is-a-container\/\">What is a Flexbox Container?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/how-do-i-create-a-container\/\">How do I create a Flexbox Container?<\/a><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">How do Flexbox Containers work?<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/elementor.com\/help\/how-do-flexbox-containers-work\/\">How do Flexbox Containers work?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/set-flexbox-container-size-behavior\/\">How do I set Flexbox Container size and behavior?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/\">How do I arrange the elements in a Flexbox Container?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/container-style-tab-settings\/\">Flexbox Container Style tab settings<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/container-layout-tab-settings\/\">Flexbox Container Layout tab settings<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/\">Flexbox Container Advanced tab settings<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/reusing-containers\/\">Reusing containers &#8211; Creating your own superwidgets<\/a><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">What are Flexbox Container best practices?<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/elementor.com\/help\/how-many-containers-page\/\">How many Flexbox Containers should my page contain?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/improve-performance-with-containers\/\">How do I improve performance with Flexbox Containers?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/container-performance-a-closer-look\/\">Flexbox Container performance \u2013 A closer look<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/making-a-container-clickable\/\">How do I make Flexbox Containers clickable?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/\">Responsive design using containers<\/a><\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Flexbox Containers &#8211; Common use cases<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/\">Basic layouts using Flexbox Containers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/creating-a-hero-section-with-containers\/\">Creating an Intro Section using Flexbox Containers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/creating-a-hero-section-with-containers\/\">Creating a Hero Section using Flexbox Containers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/creating-a-call-to-action-container\/\">Creating a Call to Action Section using Flexbox Containers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/creating-a-services-container\/\">Creating a Services Section using Flexbox Containers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/\">Creating an Hero Image Gallery using Flexbox Containers<\/a><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Creating Theme Builder templates with Flexbox Containers<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/\">Creating a Header template using Flexbox Containers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/creating-a-footer-template-with-the-container\/\">Creating a Footer template using Flexbox Containers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/creating-a-single-page-template-with-the-container\/\">Creating a Single Page template using Flexbox Containers<\/a><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">How do I move to Flexbox Containers? <\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/elementor.com\/help\/difference-between-containers-and-section-column\/\">What is the difference between Flexbox Containers and the traditional section\/column?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/elementor.com\/help\/how-many-containers-page\/\">How do I convert sections to Flexbox Containers?<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Flexbox containers use the power of flexbox CSS to make building websites faster, while giving you more freedom than ever to create exactly the design you want. Containers also provide improved page loading and greater responsive control. This is done by giving you the ability to alter each items\u2019 width, height, and order, to best [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["659eb0739bf7b9a9fd4450e5"],"footnotes":""},"categories":[1443],"tags":[],"class_list":["post-27392","post","type-post","status-publish","format-standard","hentry","category-flexbox-containers"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How do I learn about Flexbox Containers? | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about How do I learn about Flexbox Containers? in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\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\/help\/container-element\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How do I learn about Flexbox Containers? | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about How do I learn about Flexbox Containers? in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/container-element\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-07T10:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-10T14:57:54+00:00\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/container-element\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/container-element\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"How do I learn about Flexbox Containers?\",\"datePublished\":\"2022-11-07T10:00:00+00:00\",\"dateModified\":\"2024-01-10T14:57:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/container-element\/\"},\"wordCount\":425,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"articleSection\":[\"Flexbox containers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/container-element\/\",\"url\":\"https:\/\/elementor.com\/help\/container-element\/\",\"name\":\"How do I learn about Flexbox Containers? | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"datePublished\":\"2022-11-07T10:00:00+00:00\",\"dateModified\":\"2024-01-10T14:57:54+00:00\",\"description\":\"Learn everything about How do I learn about Flexbox Containers? in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/container-element\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/container-element\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/container-element\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Layout\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/layout\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Flexbox containers\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/layout\/flexbox-containers\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"How do I learn about Flexbox Containers?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How do I learn about Flexbox Containers? | Elementor","description":"Learn everything about How do I learn about Flexbox Containers? in this article from Elementor's Knowledge Base. Get Elementor tips & more.","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\/help\/container-element\/","og_locale":"en_US","og_type":"article","og_title":"How do I learn about Flexbox Containers? | Elementor","og_description":"Learn everything about How do I learn about Flexbox Containers? in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/container-element\/","og_site_name":"Help","article_published_time":"2022-11-07T10:00:00+00:00","article_modified_time":"2024-01-10T14:57:54+00:00","author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/container-element\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/container-element\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"How do I learn about Flexbox Containers?","datePublished":"2022-11-07T10:00:00+00:00","dateModified":"2024-01-10T14:57:54+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/container-element\/"},"wordCount":425,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"articleSection":["Flexbox containers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/container-element\/","url":"https:\/\/elementor.com\/help\/container-element\/","name":"How do I learn about Flexbox Containers? | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"datePublished":"2022-11-07T10:00:00+00:00","dateModified":"2024-01-10T14:57:54+00:00","description":"Learn everything about How do I learn about Flexbox Containers? in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/container-element\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/container-element\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/container-element\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Layout","item":"https:\/\/elementor.com\/help\/elementor-editor\/layout\/"},{"@type":"ListItem","position":4,"name":"Flexbox containers","item":"https:\/\/elementor.com\/help\/elementor-editor\/layout\/flexbox-containers\/"},{"@type":"ListItem","position":5,"name":"How do I learn about Flexbox Containers?"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/27392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=27392"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/27392\/revisions"}],"predecessor-version":[{"id":34622,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/27392\/revisions\/34622"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=27392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=27392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=27392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}