{"id":29101,"date":"2022-09-26T12:00:00","date_gmt":"2022-09-26T09:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=29101"},"modified":"2025-09-02T15:43:28","modified_gmt":"2025-09-02T12:43:28","slug":"container-advanced-tab-settings","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/","title":{"rendered":"Define advanced settings in Flexbox containers"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

Containers have additional options in the Advanced tab to increase design flexibility. <\/p>\n\n\n\n

Layout Settings<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Margin<\/h4>\n\n\n\n

The margin controls the amount of space \u201coutside\u201d the element. The value may be set in PX, EM, %, and REM.  You may click the chain icon to unlink the values if you need to set these individually.<\/p>\n\n\n\n

Padding<\/h4>\n\n\n\n

The padding controls the amount of space \u201cinside\u201d the element. The value may be set in PX, EM, %, and REM.  You may click the chain icon to unlink the values if you need to set these individually.<\/p>\n\n\n\n

Tip: Learn more about paddings and margins in this helpful guide<\/a>.<\/p>\n\n\n\n

Width (Widgets Only)<\/h4>\n\n\n\n

The Width property controls the amount of horizontal space that an element uses in the container. Select the width of the element, choosing from Full Width (100%), Inline (auto), or Custom.<\/p>\n\n\n\n

Width<\/strong> (Value): This is only available if Custom<\/em> is chosen. Use the slider to adjust the Width of the element within the container. The value may be set by adjusting the slider, or by entering a value in the field in PX, %, or VW. This is an important property and may be combined with the Wrap property to better optimize your design.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Note: The Inline (auto) feature does not work with Containers. Instead, the Direction property of the Container is used.<\/p>\n\n\n\n

Tip: If the Width property is set using Full Width<\/em>, Inline<\/em> or Custom<\/em> rather than the Default<\/em>, a blue indicator will be shown in the Structure window. By hovering over these indicators, it will allow you to identify items that use custom positioning or CSS.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Align Self<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
    \n
  1. The align-self property specifies the alignment for the selected item inside the flexible container. This property will override the flexible container’s align-items property.<\/li>\n\n\n\n
  2. flex-start: The element is positioned at the beginning of the container<\/li>\n\n\n\n
  3. center: The element is positioned at the center of the container<\/li>\n\n\n\n
  4. flex-end: The element is positioned at the end of the container<\/li>\n\n\n\n
  5. stretch: The element is positioned to fit the container<\/li>\n<\/ol>\n\n\n\n

    Order<\/h4>\n\n\n\n

    The order is primarily used in combination with the responsive breakpoints. This allows you to order\/reorder the elements based on the viewport. (Example: You wish to rearrange three or more elements in mobile view) You may choose between:<\/p>\n\n\n\n

      \n
    1. Start<\/li>\n\n\n\n
    2. End<\/li>\n\n\n\n
    3. Custom – If custom is selected the following options will appear:\n
        \n
      1. Custom Order – Enter value<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n

        Learn more about the Order property here<\/a>.<\/p>\n\n\n\n

        Size<\/h4>\n\n\n\n

        The flex grow\/shrink property specifies how the item will behave relative to the rest of the flexible items inside the same container. You may select between:<\/p>\n\n\n\n

          \n
        1. None<\/li>\n\n\n\n
        2. Grow<\/li>\n\n\n\n
        3. Shrink<\/li>\n\n\n\n
        4. Custom – If this option is enabled, the following options will appear:\n
            \n
          1. Custom Flex Grow – Enter value<\/li>\n\n\n\n
          2. Custom Flex Shrink – Enter value<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n

            Learn more about the Size property here<\/a>.<\/p>\n\n\n\n

            Position<\/h4>\n\n\n\n

            This option allows you to select absolute or fixed positioning for your element. If using the absolute or fixed positioning, you may manually enter the numeric X and Y positions in the Horizontal and Vertical Offset scales.<\/p>\n\n\n\n

              \n
            1. Default Position \u2013 The element is in its natural state, positioned merely by the natural flow of the page. This is the default position of all elements.<\/li>\n\n\n\n
            2. Absolute Position \u2013 The element is positioned absolutely to its first positioned parent. <\/li>\n\n\n\n
            3. Fixed Position \u2013 Set your widget to have a fixed position and place it in a custom position. The element will stay fixed in that position as the page is scrolled. The element is positioned relative to the user\u2019s viewport.<\/li>\n<\/ol>\n\n\n\n

              Tip: Confused between Sticky and Fixed? Sticky is a scrolling effect which is relative to the section it\u2019s placed in. Fixed position, however, is relative to the user viewport.<\/p>\n\n\n\n

              Note:  Absolute positioning is not the recommended method for building web page layouts. Having said that, it does come in handy in many situations where you want to position the various page elements more freely.<\/p>\n\n\n\n

              Z Index<\/h4>\n\n\n\n

              The Z-Index property specifies the stack order of elements. An element with greater stack order will always be in front of an element with a lower stack order (i.e. an element with a Z-index of 10 will be on top of (in front of) an element with a Z-index of 5.<\/p>\n\n\n\n

              CSS ID<\/h4>\n\n\n\n

              Set a CSS ID for your section. These are used to trigger events or provide anchor links. It is important that you do not add the \u201c#\u201d before the CSS ID in the field.<\/p>\n\n\n\n

              CSS Classes<\/h4>\n\n\n\n

              Set CSS Classes for your section. These are used when defining CSS rules for your design. It is important that you do not add the \u201c.\u201d before the class in the field.<\/p>\n\n\n\n

              Example: A class of pink-link could be applied to any element that you have defined in your Custom CSS as .pink-link a {color:#f876f8}.<\/p>\n\n\n\n

              Next steps<\/strong><\/h2>\n\n\n\n

              Now that you’ve familiarized yourself with the container’s Advanced tab settings, learn how to save time by saving and reusing container templates<\/a>. <\/p>\n\n\n\n

              To get the most out of Elementor,<\/strong> check out the Elementor Academy<\/a> for helpful learning resources. If you come across any issues or need help, please contact our Support Center<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

              Introduction Containers have additional options in the Advanced tab to increase design flexibility. Layout Settings Margin The margin controls the amount of space \u201coutside\u201d the element. The value may be set in PX, EM, %, and REM.  You may click the chain icon to unlink the values if you need to set these individually. Padding […]<\/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":["659eb0b9614e3c602a5e4a58"],"footnotes":""},"categories":[1443],"tags":[],"class_list":["post-29101","post","type-post","status-publish","format-standard","hentry","category-flexbox-containers"],"acf":[],"yoast_head":"\nDefine advanced settings in Flexbox containers | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Define advanced settings in Flexbox containers in this article from Elementor's Knowledge Base. Get Elementor tips & 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-advanced-tab-settings\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Define advanced settings in Flexbox containers | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Define advanced settings in Flexbox containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-26T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-02T12:43:28+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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Define advanced settings in Flexbox containers\",\"datePublished\":\"2022-09-26T09:00:00+00:00\",\"dateModified\":\"2025-09-02T12:43:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/\"},\"wordCount\":850,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Container-Advanced-Tab.png\",\"articleSection\":[\"Flexbox containers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/\",\"url\":\"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/\",\"name\":\"Define advanced settings in Flexbox containers | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Container-Advanced-Tab.png\",\"datePublished\":\"2022-09-26T09:00:00+00:00\",\"dateModified\":\"2025-09-02T12:43:28+00:00\",\"description\":\"Learn everything about Define advanced settings in Flexbox containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/#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\":\"Define advanced settings in 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":"Define advanced settings in Flexbox containers | Elementor","description":"Learn everything about Define advanced settings in 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-advanced-tab-settings\/","og_locale":"en_US","og_type":"article","og_title":"Define advanced settings in Flexbox containers | Elementor","og_description":"Learn everything about Define advanced settings in Flexbox containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/","og_site_name":"Help","article_published_time":"2022-09-26T09:00:00+00:00","article_modified_time":"2025-09-02T12:43:28+00:00","author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Define advanced settings in Flexbox containers","datePublished":"2022-09-26T09:00:00+00:00","dateModified":"2025-09-02T12:43:28+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/"},"wordCount":850,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Container-Advanced-Tab.png","articleSection":["Flexbox containers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/","url":"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/","name":"Define advanced settings in Flexbox containers | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Container-Advanced-Tab.png","datePublished":"2022-09-26T09:00:00+00:00","dateModified":"2025-09-02T12:43:28+00:00","description":"Learn everything about Define advanced settings in Flexbox containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/container-advanced-tab-settings\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/container-advanced-tab-settings\/#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":"Define advanced settings in 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\/29101","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=29101"}],"version-history":[{"count":5,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29101\/revisions"}],"predecessor-version":[{"id":152173,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29101\/revisions\/152173"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=29101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=29101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=29101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}