help center

Search
Close this search box.
On this page

Arrange the elements in a Flexbox Container

Last Update: April 21, 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 217

Direction

Direction Arrange the elements in a Flexbox Container 219

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

Row Row 1 Arrange the elements in a Flexbox Container 221Items are positioned horizontally3 Arrange the elements in a Flexbox Container 223 
Column Column Arrange the elements in a Flexbox Container 225Items are positioned vertically4 Arrange the elements in a Flexbox Container 227 
Row Reversed Row reversed Arrange the elements in a Flexbox Container 229Items are positioned horizontally but in reverse order5 Arrange the elements in a Flexbox Container 231 
Column Reversed Column reversed 1 Arrange the elements in a Flexbox Container 233Items are positioned vertically but in reverse order6 Arrange the elements in a Flexbox Container 235 

Justify Content

JUstify content in a column Arrange the elements in a Flexbox Container 237

The items below are arranged in a column.

Start Justify Start Arrange the elements in a Flexbox Container 239Items are aligned to the start of the container 1 justify Arrange the elements in a Flexbox Container 241
Center Justify Center Arrange the elements in a Flexbox Container 243Items are aligned to the center of the container 2 justify Arrange the elements in a Flexbox Container 245
End Justify end Arrange the elements in a Flexbox Container 247Items are aligned to the end of the container3 justify Arrange the elements in a Flexbox Container 249 
Space Between Justify Space Between Arrange the elements in a Flexbox Container 251Items are spaced evenly across container.
The first item aligns with the start and the final item with the end.
 
Space Around Justify Space Around Arrange the elements in a Flexbox Container 253Items 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 JUstify Space Evenly Arrange the elements in a Flexbox Container 255Items 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 column Arrange the elements in a Flexbox Container 257

The items below are arranged in a column.

Start Align Start Arrange the elements in a Flexbox Container 259Items are aligned to the start of the container 1 align Arrange the elements in a Flexbox Container 261
Center Align center Arrange the elements in a Flexbox Container 263Items are aligned to the center of the container 2 align Arrange the elements in a Flexbox Container 265
End Align end Arrange the elements in a Flexbox Container 267Items are aligned to the end of the container 3 align Arrange the elements in a Flexbox Container 269
Stretch Align Stretch Arrange the elements in a Flexbox Container 271Items are stretched across the container4 align Arrange the elements in a Flexbox Container 273

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 275

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 277

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 279
No WrapThe items will be forced to remain in one row2 wrap Arrange the elements in a Flexbox Container 281 

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

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!