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.
![Arrange the elements in a Flexbox Container 218 1 1 Arrange the elements in a Flexbox Container 217](https://cdn.statically.io/img/elementor.com/help/wp-content/uploads/2022/10/1-1.png)
Direction
![Arrange the elements in a Flexbox Container 220 Direction Arrange the elements in a Flexbox Container 219](https://cdn.statically.io/img/elementor.com/help/wp-content/uploads/2022/10/Direction.png)
Use the Direction option to determine the direction in which the contained elements will appear.
Row ![]() | Items are positioned horizontally | ![]() |
---|---|---|
Column ![]() | Items are positioned vertically | ![]() |
Row Reversed ![]() | Items are positioned horizontally but in reverse order | ![]() |
Column Reversed ![]() | Items are positioned vertically but in reverse order | ![]() |
Justify Content
![Arrange the elements in a Flexbox Container 238 JUstify content in a column Arrange the elements in a Flexbox Container 237](https://cdn.statically.io/img/elementor.com/help/wp-content/uploads/2022/10/JUstify-content-in-a-column.png)
The items below are arranged in a column.
Start ![]() | Items are aligned to the start of the container | ![]() |
---|---|---|
Center ![]() | Items are aligned to the center of the container | ![]() |
End ![]() | Items are aligned to the end of the container | ![]() |
Space Between ![]() | Items are spaced evenly across container. The first item aligns with the start and the final item with the end. | |
Space Around ![]() | 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. | |
Space Evenly ![]() | Items have equal space between themselves and then container’s edges. |
Align Items
Control how the contained items will align on their center axis, depending on the direction chosen in the Direction field.
![Arrange the elements in a Flexbox Container 258 Align items column Arrange the elements in a Flexbox Container 257](https://cdn.statically.io/img/elementor.com/help/wp-content/uploads/2022/10/Align-items-column.png)
The items below are arranged in a column.
Start ![]() | Items are aligned to the start of the container | ![]() |
---|---|---|
Center ![]() | Items are aligned to the center of the container | ![]() |
End ![]() | Items are aligned to the end of the container | ![]() |
Stretch ![]() | Items are stretched across the container | ![]() |
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.
Elements Gap
![Arrange the elements in a Flexbox Container 276 elements gap Arrange the elements in a Flexbox Container 275](https://cdn.statically.io/img/elementor.com/help/wp-content/uploads/2022/10/elements-gap.webp)
Control the spacing between one element to another (widget or another container) in pixels (PX), percentage (% ), or Viewport Width (VW).
Note: The default Elements Gap is set to 20PX, but it can be edited in Site Settings > Layout.
Wrap
![Arrange the elements in a Flexbox Container 278 wrap Arrange the elements in a Flexbox Container 277](https://cdn.statically.io/img/elementor.com/help/wp-content/uploads/2022/10/wrap.webp)
Control if the contained items will be forced to remain in one row or spill over to the next one. Wrap will break the line where items no longer fit in the container, whereas No Wrap will keep all widgets in one row.
Wrap | The line will break where items no longer fit the container, and will spill to an additional line | ![]() |
---|---|---|
No Wrap | The items will be forced to remain in one row | ![]() |
Note: You’ll find more options connected to arranging container elements under the Advanced tab.
Next steps
Now that you know how to arrange the widgets in a container, learn about the container settings in the Layout tab.
To get the most out of Elementor, check out the Elementor Academy for helpful learning resources. If you come across any issues or need help, please contact our Support Center.