Use containers to keep your content centered and legible.
Yeeflow Flexbox Container control is a way to apply the same order, positioning, and size settings on a group of items that are confined within the same container. These items can either be other containers placed inside the parent container, or controls.
Flexbox Containers are a flexible way to organize items in a column or a row. It’s efficient, dynamic, and responsive.
Flexbox operates on two axes. The Main Axis crosses the width of the container and a Cross Axis literally crosses the height of the container.
The container options allow users to define these settings on 3 levels:
The container level – these settings will affect the container itself, its size, and its layout.
The items group level – these settings will affect the items as a group. For instance, the direction of the items, the spacing between them, their alignment, etc.
The specific item level – each item inside the container can accept specific settings, which will overrule the group settings. For instance, if the group is aligned to the center, you can define one item to align to Flex Start (top of the container).
Flexbox Containers vs. Sections and Columns
Here are some things you should know about the relationship between Flexbox Containers and Sections and Columns:
The containers can be added inside into the columns of a Section, while the Sections cannot be added inside into a container.
The Containers can be added inside into a Grid, while the Section cannot be added into a Grid.
The Items inside in the containers can be organized in 2 directions (Horizontal or Vertical), while the items inside in a section can only have one direction (Vertical).
The Items inside in a Container can set their item level styles in the advanced tab (under Container Child), while the items inside in a Section do not have this option.
What does the Container do?
Flexbox containers simplify page layouts, using only one wrapping element, instead of two – columns and sections, allowing you to group controls together in a container. This approach will empower you to create highly sophisticated page designs, with significantly less DOM bloat.
Using Containers will enable you to:
Optimize layout – determine the direction, alignment, order, length, and placement of a control, or a number of controls within the container, without requiring additional columns or inner sections. This allows you to optimize the layout of widgets throughout the page.
Better design control – Using Containers allows you better control over the design. By first grouping elements inside a container, it can then be sized to fit perfectly on your page. You can control the layout and distribution of elements within the Container, and adjust your content to every screen size, resulting in greater responsiveness, without compromising on speed.
Enhance nesting capabilities – nest one container inside another, for greater flexibility and complex layouts.
Hyperlink the entire container wrapper – improve the usability of the content inside in containers by hyperlinking the entire container wrapper.
Add a Container?
You can add a Container control to your page from the Controls panel. By default, the Section will span across the full width of the body.
Adjusting the Container’s Size and Behavior
You can adjust the container’s size and behavior by navigating to the Layout tab > Container section.
Width
The Width of a container is 100% by default. You can also set a specific width in
px: Pixels
%: Percentage
em: Em (relative to the font size of the element)
rem: Root em (relative to the font size of the root element)
vh: Viewport height
calc(): Calculation function
Height
The height of a Section automatically adjusts to its content — as you add controls, the section grows taller. You can also set a min height.
The Minimum Height slider controls the minimum height of the container’s content in
px: Pixels
%: Percentage
em: Em (relative to the font size of the element)
rem: Root em (relative to the font size of the root element)
vh: Viewport height
calc(): Calculation function
Overflow
The Overflow option controls if the content of a container does not fit within the viewport, should the overflowed content be hidden, or visible, causing horizontal scrolling.
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.
Scroll: Enable a scroll bar to manage overflow items, allowing users to scroll through content that exceeds the visible area.
HTML Tag
Wrap an entire container from the dropdown menu by selecting the most appropriate HTML tag for your container.
Default: Set the container as a div tag in HTML.
div: Set the container as a div tag in HTML.
a: Select the “a” option from the HTML tag dropdown selector to make this container clickable. A link option will then appear below. Enter the desired URL using the https:// in the field or use the dynamic options by clicking the stack icon.You may also choose to open the link in a new tab or add additional custom attributes.
Action
For action settings, please refer to: Container Execute type
Adjusting the Contained Elements
Introduction
You can adjust the container’s styling by navigating to the Layout tab > Items section.
Direction
Use the Direction option to determine the direction in which the contained elements will appear.
Row: Items are positioned horizontally.
Column: Items are positioned vertically.
Row Reversed: Items are positioned horizontally but in reverse order.
Column Reversed: Items 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.
Start: Items are aligned to the start of the container.
Center: Items are aligned to the center of the container.
End: Items are aligned to the end of the container.
Stretch: Items 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.
Start: items are aligned to the top.
Center: items are centered vertically.
End: items are aligned to the bottom.
Space between: items are evenly distributed from edge to edge.
Space around: items are evenly distributed along between elements and edges.
Space Evenly: items have equal space between, before and after them.
Elements Gap
Control the spacing between one element to another (control or another container) in pixels (PX), or percentage (%).
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.
No Wrap: The items will be forced to remain in one row.
Wrap: The line will break where items no longer fit the container, and will spill to an additional line.
Appearance
Dynamic Display Rules: When you set a dynamic display rule, it behaves differently based on specific conditions and rules. Learn how to create dynamic display rules for a control.
Style the Container
Background (Normal & Hover)
Choose between Classic (which allows you to set a background color or image), Gradient (allowing you to set a color gradient background).
Background Type – Select the background type, color, gradient, image.
Color (background): From the color picker, select the color(s) for the field.
Image: Click to select or upload an image to use as the background image of your container.
Background Overlay
Background Type – Select the background type, color, gradient, image.
Color (background): From the color picker, select the color(s) for the field.
Image: Click to select or upload an image to use as the background overlay image of your container.
Opacity: Use the slider or manually enter a value in the field.
Border (Normal & Hover)
Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved.
Width (border): Enter a chosen value in the fields based on px.
Color (border): From the color picker, choose the background color for your border.
Border Radius: Enter a chosen value in the fields based on px, or %.
Box Shadow: Click the pencil icon to open the shadow properties options.
Typography
Text color: You can set the text color within the container. This will only apply to fields without a pre-set color, and it will not overwrite existing colors.
Text align: You can set the text alignment within the container. This setting will apply only if the individual field does not have its own text alignment configured.
Advanced Settings
Set the Advanced options that are applicable to this control.