Container Overview

Yeeflow team
Yeeflow team
  • Updated

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.

 

Container_Overview.jpg

 

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.

Container_Axis.jpg

 

The container options allow users to define these settings on 3 levels:

  1. The container level – these settings will affect the container itself, its size, and its layout.
  2. 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.
  3. 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_Container.gif

 

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:

  1. 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.
  2. 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.
  3. Enhance nesting capabilities – nest one container inside another, for greater flexibility and complex layouts.
  4. 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.

Container_Add.png

 

Adjusting the Container’s Size and Behavior

You can adjust the container’s size and behavior by navigating to the Layout tab > Container section.

 

Container_Size_and_Behavior.jpg

 

Width

The Width of a container is 100% by default. You can also set a specific width in pixels (PX), or percentage (%).

 

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 pixels (PX).

 

Min-height.gif

 

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.

 

Overflow.gif

 

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.

 

Adjusting the Contained Elements

Introduction

You can adjust the container’s styling by navigating to the Layout tab > Items section.

Container_Items.jpg

 

Direction

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

Container_Items_Direction.jpg

 

Row: Items are positioned horizontally.

Container_Items_Row.jpg

Column: Items are positioned vertically.

Container_Items_Column.jpg

Row Reversed: Items are positioned horizontally but in reverse order.

Container_Items_Row_Reversed.jpg

Column Reversed: Items are positioned vertically but in reverse order.

Container_Items_Column_Reversed.jpg

 

Align Items

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

Container_Items_Align_Items.jpg

 

Start: Items are aligned to the start of the container.

Container_Align_Start.jpg

Center: Items are aligned to the center of the container.

Container_Align_Center.jpg

End: Items are aligned to the end of the container.

Container_Align_End.jpg

Stretch: Items are stretched across the container.

Container_Align_Stretch.jpg

 

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.

 

Container_Justify_Content.jpg

 

Start: items are aligned to the top.

Container_Justify_Start.jpg

Center: items are centered vertically.

Container_Justify_Center.jpg

End: items are aligned to the bottom.

Container_Justify_End.jpg

Space between: items are evenly distributed from edge to edge.

Container_Justify_Space_Between.jpg

Space around: items are evenly distributed along between elements and edges.

Container_Justify_Space_Around.jpg

Space Evenly: items have equal space between, before and after them.

Container_Justify_Space_Evenly.jpg

 

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.

Container_Items_wrap_setting.jpg

 

No Wrap: The items will be forced to remain in one row.

Container_Items_nowrap.jpg

 

Wrap: The line will break where items no longer fit the container, and will spill to an additional line.

Container_Items_wrap.jpg

 

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).

  1. Background Type – Select the background type, color, gradient, image.
  2. Color (background): From the color picker, select the color(s) for the field.
  3. Image: Click to select or upload an image to use as the background image of your container.

 

Container_Style_Background.jpg

 

Background Overlay

  1. Background Type – Select the background type, color, gradient, image.
  2. Color (background): From the color picker, select the color(s) for the field.
  3. Image: Click to select or upload an image to use as the background overlay image of your container.
  4. Opacity: Use the slider or manually enter a value in the field.

Container_Style_background_overlay.jpg

 

Border (Normal & Hover)

  1. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved.
  2. Width (border): Enter a chosen value in the fields based on px.
  3. Color (border): From the color picker, choose the background color for your border.
  4. Border Radius: Enter a chosen value in the fields based on px, or %.
  5. Box Shadow: Click the pencil icon to open the shadow properties options.

Container_Style_Border.jpg

 

Advanced Settings

Set the Advanced options that are applicable to this control.

Was this article helpful?

/

Comments

0 comments

Please sign in to leave a comment.