Flex Columns

Flexbox layout for flexible column arrangements

Overview

The Flex Columns element uses CSS Flexbox to create flexible multi-column layouts. It renders as a <div> with flex flex-row flex-wrap gap-4 items-stretch classes by default, allowing columns to have flexible widths and wrap to new rows.

When you add a Flex Columns element, it automatically creates 2 Column child elements. Unlike Grid Columns which enforces equal widths, Flex Columns allows each column to have its own width based on content or explicit sizing.

Key Features

  • Flexbox powered: Uses CSS Flexbox for flexible sizing and alignment
  • Wrapping enabled: Items wrap to new rows when they exceed the container width (flex-wrap)
  • Auto-creates columns: Automatically adds 2 Column children when inserted
  • Flexible widths: Columns can have different widths using w-* or flex-* classes
  • Equal height: Default items-stretch makes columns equal height within each row
When to Use Flex

Choose Flex Columns when you need columns with different widths, content-based sizing, or more control over spacing and alignment. Choose Grid Columns for strict equal-width layouts.

Settings

Configure the Flex Columns element using these settings in the Inspector panel:

Setting Description Default
Direction Flex direction: flex-row (horizontal) or flex-col (vertical stacking). row
Wrap Allow items to wrap to the next line when they exceed container width. Uses flex-wrap or flex-nowrap. wrap
Gap Space between flex items using Tailwind's gap scale (gap-0 through gap-16). gap-4 (1rem)
Justify Horizontal alignment of items: start, center, end, between (space-between), around (space-around), evenly (space-evenly). start
Align Vertical alignment of items: start, center, end, stretch, baseline. stretch

Examples

2-Column Flex Layout (Default)

The default flex layout with two equally-sized columns:

<div class="flex flex-row flex-wrap gap-4 items-stretch">
  <div class="flex-1 p-4 bg-gray-100">Column 1</div>
  <div class="flex-1 p-4 bg-gray-100">Column 2</div>
</div>

Centered Flex Items

Center items both horizontally and vertically:

<div class="flex flex-row flex-wrap gap-4 justify-center items-center">
  <div class="p-4 bg-blue-100">Centered Item 1</div>
  <div class="p-4 bg-blue-100">Centered Item 2</div>
  <div class="p-4 bg-blue-100">Centered Item 3</div>
</div>

Flex with Different Width Children

Use width utilities on children to create asymmetric layouts:

<div class="flex flex-row flex-wrap gap-4 items-stretch">
  <div class="w-2/3 p-4 bg-blue-100">Wide Column (2/3)</div>
  <div class="w-1/3 p-4 bg-gray-100">Narrow Column (1/3)</div>
</div>

Space Between Items

Distribute items with equal space between them:

<div class="flex flex-row flex-wrap gap-4 justify-between items-center">
  <div class="p-4 bg-gray-100">Left</div>
  <div class="p-4 bg-gray-100">Center</div>
  <div class="p-4 bg-gray-100">Right</div>
</div>

Vertical Stack (Column Direction)

Stack items vertically instead of horizontally:

<div class="flex flex-col gap-4">
  <div class="p-4 bg-gray-100">Item 1</div>
  <div class="p-4 bg-gray-100">Item 2</div>
  <div class="p-4 bg-gray-100">Item 3</div>
</div>

Responsive Flex Layout

Stack on mobile, side-by-side on larger screens:

<div class="flex flex-col md:flex-row gap-4 items-stretch">
  <div class="flex-1 p-4 bg-gray-100">Column 1</div>
  <div class="flex-1 p-4 bg-gray-100">Column 2</div>
</div>

Justify Content Reference

Control horizontal alignment of flex items:

Class CSS Value Effect
justify-start flex-start Items aligned to the start (left)
justify-center center Items centered horizontally
justify-end flex-end Items aligned to the end (right)
justify-between space-between Equal space between items, none at edges
justify-around space-around Equal space around each item
justify-evenly space-evenly Equal space between all items and edges

Align Items Reference

Control vertical alignment of flex items:

Class CSS Value Effect
items-start flex-start Items aligned to the top
items-center center Items centered vertically
items-end flex-end Items aligned to the bottom
items-stretch stretch Items stretch to fill container height
items-baseline baseline Items aligned by text baseline

Best Practices

  • Use flex-1 for equal widths: Apply flex-1 to children for equal-width columns that grow to fill space
  • Combine with width utilities: Use w-1/2, w-1/3, etc. for specific column proportions
  • Consider wrapping: Keep flex-wrap enabled to prevent horizontal overflow on mobile
  • Responsive direction: Use flex-col md:flex-row for mobile-friendly layouts that stack vertically on small screens
  • Grid Columns – CSS Grid layout for equal-width columns
  • Div – Flexible container with flex/grid display modes
  • Container – Center content with responsive max-width