Skip to Main Content

Overview

Flexbox Container is a theme component that is suitable for arranging components in a flexible layout. This component supports horizontal or vertical direction, wrapping, spacing, alignment, justification, overflow, and flex item sizing.

Instructions

  1. In Page Designer, select a region
  2. Go to the Property Editor
  3. Under the Region tab
    1. Find Identification → Type, use Flexbox Container

Demo

Stretching

Left Column

Right Column

Alignment

This demonstrates how flexbox items can be aligned declaratively. Here we have two regions that are center aligned vertically.

Left Column

Right Column

Direction

This demonstrates how flexbox items can be laid out vertically in a column, or horizontally in a row.

Region 1

Region 2

Region 3

Region 1

Region 2

Region 3

Wrapping

This demonstrates how flexbox items can wrap onto multiple lines when needed.

Region 1

Region 2

Region 3

Region 4

Region 5

This demonstrates how regions can be laid out in a row and stretch to be equal in height.