{"id":29577,"date":"2022-10-02T12:00:00","date_gmt":"2022-10-02T09:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=29577"},"modified":"2024-04-21T16:06:14","modified_gmt":"2024-04-21T13:06:14","slug":"adjusting-the-contained-elements","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/","title":{"rendered":"Arrange the elements in a Flexbox Container"},"content":{"rendered":"\n

Containers offer you enormous flexibility in how to arrange the elements inside the container. The controls for arranging the items in your container are found in the Items’ area of the Layout <\/strong>tab. <\/p>\n\n\n\n

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

Direction<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Use the Direction <\/strong>option to determine the direction in which the contained elements will appear.<\/p>\n\n\n\n

Row<\/strong> \"\"<\/th>Items are positioned horizontally<\/td>\"\" <\/td><\/tr>
Column<\/strong> \"\"<\/th>Items are positioned vertically<\/td>\"\" <\/td><\/tr>
Row Reversed<\/strong> \"\"<\/th>Items are positioned horizontally but in reverse order<\/td>\"\" <\/td><\/tr>
Column Reversed<\/strong> \"\"<\/th>Items are positioned vertically but in reverse order<\/td>\"\" <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Justify Content<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The items below are arranged in a column.<\/p>\n\n\n\n

Start<\/strong> \"\"<\/th>Items are aligned to the start of the container<\/td> \"\"<\/td><\/tr>
Center<\/strong> \"\"<\/th>Items are aligned to the center of the container<\/td> \"\"<\/td><\/tr>
End<\/strong> \"\"<\/th>Items are aligned to the end of the container<\/td>\"\" <\/td><\/tr>
Space Between<\/strong> \"\"<\/th>Items are spaced evenly across container.
The first item aligns with the start and the final item with the end. <\/td>		 <\/td><\/tr>
Space Around<\/strong> \"\"<\/td>Items have an equal space between
themselves. There is an equal amount
of space between the items and
there is equal space between the
first and last items and the container’s
edges. <\/td>		<\/td><\/tr>
Space Evenly<\/strong> \"\"<\/td>Items have equal space between
themselves and then container’s edges.<\/td>		<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Align Items<\/h2>\n\n\n\n

Control how the contained items will align on their center axis, depending on the direction chosen in the Direction<\/strong> field.<\/p>\n\n\n\n

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

The items below are arranged in a column.<\/p>\n\n\n\n

Start<\/strong> \"\"<\/th>Items are aligned to the start of the container<\/td> \"\"<\/td><\/tr>
Center<\/strong> \"\"<\/th>Items are aligned to the center of the container<\/td> \"\"<\/td><\/tr>
End<\/strong> \"\"<\/th>Items are aligned to the end of the container<\/td> \"\"<\/td><\/tr>
Stretch<\/strong> \"\"<\/th>Items are stretched across the container<\/td>\"\"<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Control how the contained items will align on their center axis, depending on the direction chosen in the Direction field. It also helps distribute the space leftover in the container between the items.<\/p>\n\n\n\n

Elements Gap<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Control the spacing between one element to another (widget or another container) in pixels (PX), percentage (% ), or Viewport Width (VW).<\/p>\n\n\n\n

Note: <\/strong>The default Elements Gap is set to 20PX, but it can be edited in Site Settings > Layout<\/strong>.<\/p>\n\n\n\n

Wrap<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Control if the contained items will be forced to remain in one row or spill over to the next one. Wrap <\/strong>will break the line where items no longer fit in the container, whereas No Wrap<\/strong> will keep all widgets in one row.<\/p>\n\n\n\n

Wrap<\/strong><\/th>The line will break where items no longer fit the container, and will spill to an additional line<\/td>\"\"<\/td><\/tr>
No Wrap<\/strong><\/th>The items will be forced to remain in one row<\/td>\"\" <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Note: You’ll find more options connected to arranging container elements under the Advanced tab<\/a>. <\/p>\n\n\n\n

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

Now that you know how to arrange the widgets in a container, learn about the container settings in the Layout tab<\/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":"

Containers offer you enormous flexibility in how to arrange the elements inside the container. The controls for arranging the items in your container are found in the Items’ area of the Layout tab. Direction Use the Direction option to determine the direction in which the contained elements will appear. Row Items are positioned horizontally   […]<\/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":["659eb0a38e6b7b238ec23d3b"],"footnotes":""},"categories":[1443],"tags":[],"class_list":["post-29577","post","type-post","status-publish","format-standard","hentry","category-flexbox-containers"],"acf":[],"yoast_head":"\nArrange the elements in a Flexbox Container | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Arrange the elements in a Flexbox Container 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\/adjusting-the-contained-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Arrange the elements in a Flexbox Container | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Arrange the elements in a Flexbox Container in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-02T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-21T13:06:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/10\/1-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"330\" \/>\n\t<meta property=\"og:image:height\" content=\"803\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/adjusting-the-contained-elements\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Arrange the elements in a Flexbox Container\",\"datePublished\":\"2022-10-02T09:00:00+00:00\",\"dateModified\":\"2024-04-21T13:06:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/\"},\"wordCount\":493,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/10\/1-1.png\",\"articleSection\":[\"Flexbox containers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/\",\"url\":\"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/\",\"name\":\"Arrange the elements in a Flexbox Container | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/10\/1-1.png\",\"datePublished\":\"2022-10-02T09:00:00+00:00\",\"dateModified\":\"2024-04-21T13:06:14+00:00\",\"description\":\"Learn everything about Arrange the elements in a Flexbox Container in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/10\/1-1.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/10\/1-1.png\",\"width\":330,\"height\":803},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/#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\":\"Arrange the elements in a Flexbox Container\"}]},{\"@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":"Arrange the elements in a Flexbox Container | Elementor","description":"Learn everything about Arrange the elements in a Flexbox Container 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\/adjusting-the-contained-elements\/","og_locale":"en_US","og_type":"article","og_title":"Arrange the elements in a Flexbox Container | Elementor","og_description":"Learn everything about Arrange the elements in a Flexbox Container in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/","og_site_name":"Help","article_published_time":"2022-10-02T09:00:00+00:00","article_modified_time":"2024-04-21T13:06:14+00:00","og_image":[{"width":330,"height":803,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/10\/1-1.png","type":"image\/png"}],"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\/adjusting-the-contained-elements\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Arrange the elements in a Flexbox Container","datePublished":"2022-10-02T09:00:00+00:00","dateModified":"2024-04-21T13:06:14+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/"},"wordCount":493,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/10\/1-1.png","articleSection":["Flexbox containers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/","url":"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/","name":"Arrange the elements in a Flexbox Container | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/10\/1-1.png","datePublished":"2022-10-02T09:00:00+00:00","dateModified":"2024-04-21T13:06:14+00:00","description":"Learn everything about Arrange the elements in a Flexbox Container in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/10\/1-1.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/10\/1-1.png","width":330,"height":803},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/adjusting-the-contained-elements\/#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":"Arrange the elements in a Flexbox Container"}]},{"@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\/29577","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=29577"}],"version-history":[{"count":15,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29577\/revisions"}],"predecessor-version":[{"id":49377,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29577\/revisions\/49377"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=29577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=29577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=29577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}