Flexbox Container Layout tab settings

Introduction

This document describes the Container flex properties and how they can be applied in the Editor panel. It will help you understand how to best optimize your designs using Containers.

Container Layout 

Content Width

Control if the elements in the container will be boxed, or take up the entire width of the container. Select between Boxed or Full Width options in the dropdown

So, should you use ‘Boxed’ or ‘Full Width’ when placing a new container in a layout?

If	Use
You want to adjust the width of the content inside the container but not the container’s width	‘Boxed’, and adjust the container’s content width using the width control
You want to adjust the container’s width but not the container’s content width	‘Full Width’, and adjust the container’s width using the width control
You want to adjust the container’s width and the container’s content width	‘Full Width’, adjust the container’s width using the width control, and adjust the container’s content width with padding in the Advanced tab

Note: The Content Width setting can be set individually for responsive layouts.

Width

Control the container’s width or the container’s content width in PX / % / VW. This control applies a different effect depending on whether Content Width is set on ‘Boxed’ or ‘Full Width’.

Boxed

When Content Width is set on ‘Boxed’, the width control allows adjusting the width of the content inside the container.

Note: This is the default setting when creating new containers.

Full Width

When Content Width is set on ‘Full width’, the width control allows adjusting the container’s width.

Note: By default, ‘Boxed’ & ‘Full width’ containers will stretch on the available space according to their placement in the layout – if the container is a parent it will then occupy the full viewport width – if the container is nested in a parent container, the nested will take the full parent’s content width.

Min Height

Control the minimum height of the container’s content. Use the slider or manually enter a value to set the desired minimum container height in PX or VH.

Note: Setting the value to 100VH will fit the height of the viewport. This setting can be set individually for responsive layouts.

Overflow

Control if the content of a container does not fit within the viewport, should the overflowed content be hidden, or visible, causing horizontal scrolling. From the dropdown selector, choose Default, Hidden, or Auto as needed by your design.

• Default allows the overflow of items outside the container
• Hidden hides the overflowing items. The overflowing items are not accessible
• Auto creates a scrollbar when content overflows to keep the items accessible. This setting allows for swiping across the content in mobile views.

HTML Tag

From the dropdown menu select the most appropriate for your container from the options. Containers may also be made clickable by selecting the “a” tag.

Note: HTML Tags are essential for SEOs. As the container is defined higher in the DOM hierarchy, the easier and more important its content is regarded by search engines. This setting can be set individually for responsive layouts.

Items

The following controls are available. These apply to all the elements within the Container.

Direction

The direction option is the most basic, but also most important of container layout options. Choose between Row, Column, or the Reversed options depending on your needs and layout.

1. Row: Items are positioned horizontally
2. Column: Items are positioned vertically
3. Row Reverse: Items are positioned horizontally but in reverse order
4. Column Reverse: Items are positioned vertically but in reverse order

Align Items

The align items property attempts to align the items on their center axis. Depending on the direction chosen, it will align all the items within the container.

The following options are available.

1. Flex Start: This aligns the items to the starting edge of the container
2. Center: This aligns the to the center of the container
3. Flex End: This aligns the items to the ending edge of the container
4. Stretch: This will attempt to stretch the items to fit the container*

*Stretch will only be applied if items do not have a defined width.

Justify Content

The justify content property defines the alignment along the item’s center axis. It also helps distribute the space leftover in the container between the items.

The following justify-content options are available in the editor:

1. Flex Start: This justifies the content to the starting edge of the container. 
2. Center: This justifies the content to the center of the container
3. Flex End: This justifies the content to the ending edge of the container
4. Space Between: This creates space between the content in which the first item is placed to the starting edge and the last to the ending.
5. Space Around: This creates equal space between container and the items.
6. Space Evenly: This creates equal space between items without regards to the container.

Combining Properties

Many times you will combine the alignment and justification properties to achieve your goals.  In the following example, a container’s direction is set to row. The items are aligned to the center. A justification property may then be applied to achieve the desired result.

Content Gap

Use the Gap option to add space between the elements.  it can be used along the align and justify properties for even more control of your design. The slider or value may be entered into the field in PX, %, or VW (Viewport Width).

Note: Gap uses the space “outside” an element very similar to margin. If used with the Wrap property, the value must be subtracted from the child elements. (example: 50/50 would use no gap. In order to use a 5% Gap but not wrap, a layout of 47.5% element Width / 5% Gap / 47.5% element width should be used. You may need to try margin or padding instead of Gap in some cases.

Note: The default Elements Gap is set to 20PX, but it can be edited in site settings > layout.
This setting can be set individually for responsive layouts.

Wrap

When wrap is applied, it will allow elements that use a defined width to wrap into multiple lines rather than forcing the items to a single line. This can be used to create multi line elements all in the same container.  

Example: A large heading widget may be placed above several smaller horizontally aligned elements. This would have been achieved by using an inner section with columns in the past but can now be better optimized.

Align Content

The align content property is only displayed if the wrap property is used. It is similar to the justify content in that it uses the available space to distribute the elements. You may choose between center, flex-start, flex-end, space between, space around, and space evenly. These will apply the same functionality as used above to justify content.

Next steps

Now that you’ve learned about the settings in a container’s Layout tab, read about the container settings in the Style 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.