How do I arrange the elements in a Flexbox Container?

Introduction

Just as their name indicates, Flexbox Containers offer you enormous flexibility in how to arrange the elements inside the container. First, you’ll need to open the the Layout tab and open the Items section.

Direction

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

RowItems are positioned horizontally 
ColumnItems are positioned vertically 
Row ReversedItems are positioned horizontally but in reverse order 
Column ReversedItems are positioned vertically but in reverse order 

Align Items

Control how the contained items will align on their center axis, depending on the direction chosen in the Direction field.

Flex StartItems are aligned to the start of the container 
CenterItems are aligned to the center of the container 
Flex EndItems are aligned to the end of the container 
StretchItems are stretched across the container

Justify Content

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.

Flex StartItems are aligned to the start of the container 
CenterItems are aligned to the center of the container 
Flex EndItems are aligned to the end of the container 
StretchItems are stretched across the container 

Elements Gap

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

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 line
No WrapThe 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.

Share it on social networks

Share on facebook
Share on twitter
Share on linkedin
Share on email
Was this article helpful?

Related content

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page