help center

On this page

Arrange the elements in a Flexbox Container

Last Update: January 10, 2024

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.

1 1 Arrange the elements in a Flexbox Container 1

Direction

JUstify content Arrange the elements in a Flexbox Container 3

Use the Direction option to determine the direction in which the contained elements will appear.

RowItems are positioned horizontally3 Arrange the elements in a Flexbox Container 5 
ColumnItems are positioned vertically4 Arrange the elements in a Flexbox Container 7 
Row ReversedItems are positioned horizontally but in reverse order5 Arrange the elements in a Flexbox Container 9 
Column ReversedItems are positioned vertically but in reverse order6 Arrange the elements in a Flexbox Container 11 

Justify Content

4 JUstify content Arrange the elements in a Flexbox Container 13
StartItems are aligned to the start of the container 1 justify Arrange the elements in a Flexbox Container 15
CenterItems are aligned to the center of the container 2 justify Arrange the elements in a Flexbox Container 17
EndItems are aligned to the end of the container3 justify Arrange the elements in a Flexbox Container 19 
Space BetweenItems are spaced evenly across container.
The first item aligns with the start and the final item with the end.
 
Space AroundItems 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 EvenlyItems 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.

Align items Arrange the elements in a Flexbox Container 21
StartItems are aligned to the start of the container 1 align Arrange the elements in a Flexbox Container 23
CenterItems are aligned to the center of the container 2 align Arrange the elements in a Flexbox Container 25
EndItems are aligned to the end of the container 3 align Arrange the elements in a Flexbox Container 27
StretchItems are stretched across the container4 align Arrange the elements in a Flexbox Container 29

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

elements gap Arrange the elements in a Flexbox Container 31

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

wrap Arrange the elements in a Flexbox Container 33

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.

WrapThe line will break where items no longer fit the container, and will spill to an additional line1 wrap Arrange the elements in a Flexbox Container 35
No WrapThe items will be forced to remain in one row2 wrap Arrange the elements in a Flexbox Container 37 

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.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article