Layout with Flexbox Container

The Flexbox Container in EComposer is a layout element based on CSS Flexbox, designed to give you precise control over alignment, spacing, and ordering of elements inside a section.

It is especially useful when you need:

• More control than a traditional Inner Row
• Flexible horizontal or vertical layouts
• Precise alignment (center, start, end, space-between…)
• Responsive control without creating multiple Inner Rows

In EComposer, the Flexbox Container is the parent, and elements inside it (Text, Image, Button, etc.) are flex items.

When should you use Flex Box?

Flex Box is recommended when you need to:

• Place multiple elements on the same row or column
• Align elements quickly (left, center, right, top, bottom)
• Distribute spacing evenly between items
• Build responsive layouts with minimal setup
• Reduce layout complexity and nested structures

Flexbox Container Settings

To add a Flexbox to your page in EComposer, open your page, go to Add Element → Flex Container, drag & drop the Flex Container element inside a section.

Below are the available layout options in Flexbox Container and how each one works.

• Content Width: Defines how wide the content inside the container is.
  – Full width: Content spans the entire viewport width
  – Boxed: Content is constrained by the theme’s container width

• Content Height: Controls the height of the Flexbox Container.
  – Fix to screen: Container fills the viewport height
  – Min height: Height adjusts based on content

• Flex Direction: Determines the direction in which items are laid out. This is the core setting that defines whether your layout is horizontal or vertical.
  – Row: Align flex items from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
  – Column: Align flex items from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
  – Row Reverse: Align flex items from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
  – Column Reverse: Align flex items from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.

• Items per Row: Sets the maximum number of items displayed in a single row (applies when Flex Direction is set to Row).
  Example: 3 items per row → Up to 3 elements per row. Extra items will move to the next line when Flex Wrap is enabled

• Flex Wrap: Controls whether items can move to the next line. Important for responsive layouts, especially on mobile devices.
  – No wrap: All items stay on one line and may shrink
  – Wrap: Items move to the next line when space is insufficient

• Align items: Aligns items along the cross axis (perpendicular to the main direction).
  – Start: Align to the beginning
  – Center: Align to the center
  – End: Align to the end
  – Baseline: Items are aligned such as their baselines align
  – Stretch: Stretch items to fill the container
  Example: Row direction + Align center → Vertical centering

• Justify Content: Controls how items are aligned along the main axis.
  – Start: Align items at the beginning
  – Center: Align items in the center
  – End: Align items at the end
  – Space Around: Space around each item
  – Space Evenly: Equal space between and around items

• Row Gap: adjust vertical spacing between rows.
• Column Gap: adjust horizontal spacing between items