1003 Using the Container

The Container is available to you if you have the Configurator active on your account.

The Container a widget which aims at providing a more efficient way to lay out, align and distribute space among different widgets.

Good uses for the Container

1. Laying a collection of widgets out in one direction or another. 
2. Controlling the dimensions of each widget within a singular dimension.
3. Controlling the spacing between widgets.
4. Streamlining the process of creating Configurator rules - instead of creating a list of actions for
each widget, you can use one basic rule for the entire Container widget - all its "child widgets" will automatically follow this rule.
5. Remove the need to align each widget separately on the slide after changing the slide’s design
or adding new content - you will only need to move or resize one widget instead of
aligning each widget manually.

How to add widgets to the Container widget

1. Open a slide
2. Click on the widget "Container" in the Content menu
3. Activate it 
3. All widget that are selected via the Content menu while the Container widget is selected will be automatically inserted into the Container


Direction options

This option establishes the main-axis and defines the direction that the added widgets will be placed in the Container

● Row - left to right (Default)

● Row-reverse - right to left

● Column - top to bottom

● Column-reverse - bottom to top

Gap (spacing)

This option controls the space between the rows and the columns inside the Container widget. The Gap
spacing is applied only between the widgets within the Container.

Justify content

This option defines the alignment along the main axis. It helps distribute extra free space leftover
when either all the Container’s widgets on a line are inflexible, or are flexible but have reached
their maximum size. It also exerts some control over the alignment of the widgets when they overflow
the line.

● Flex Start - the widgets are packed toward the start of the direction. (Default)


● Flex End - the widgets are packed toward the end of the direction.


● Center - the widgets are centered along the line.


● Space Around - the widgets are evenly distributed in the line with equal space around them.
Note: visually the spaces aren’t equal, since all the widgets have equal space on both sides. The first widget will have one unit of space against the Container edge, but two units of space between the next widgets because that next item has its own spacing that applies.


● Space Between - the widgets are evenly distributed in the line; the first widget is on the start line, with the last widget on the end line.



Aligning Widgets

This option defines the default behavior for how the internal widgets are laid out along the cross axis on
the current line. It is like the justify-content version for the cross-axis (perpendicular to the main-axis).

● Flex Start - the widgets are placed toward at the start of the cross axis. The difference between these is subtle, and is about respecting the direction rules. (Default) 


● Center - the widgets are centered in the cross-axis.


● Flex End - the widgets are placed at the end of the cross axis. The difference is again subtle
and pertains to respecting direction rules.



Aligning Content

This aligns a Container’s lines when there is extra space in the cross-axis, similar to how justify-content aligns individual widgets within the main-axis.

● Flex Start - the widgets are packed to the start of the container. (Default)

● Normal - the widgets are packed in their default position as if no changes were made.


● Center - the widgets are centered in the container.


● Flex End - the widgets are packed to the end of the container.

● Space Between - the widgets are evenly distributed; the first line is at the start of the container,
while the last one is at the end.


● Space around - the widgets are evenly distributed with equal space around each line.