Flex Layout — Component Library

1. Direction

Controls the main axis. flex-row (default) lays items left→right; flex-col stacks them top→bottom.

flex-row (default)

A

B

C

flex-row-reverse

A

B

C

flex-col

A

B

C

flex-col-reverse

A

B

C

2. Justify (main axis)

Distributes space along the main axis (horizontal for flex-row).

justify-start

1

2

3

justify-center

1

2

3

justify-end

1

2

3

justify-between

1

2

3

justify-around

1

2

3

justify-evenly

1

2

3

3. Align Items (cross axis)

Positions items on the perpendicular axis. Mix variable heights to see the difference.

items-start

sm

md

lg

items-center

sm

md

lg

items-end

sm

md

lg

items-stretch

sm

md

lg

items-baseline

sm

md

lg

4. Wrap

flex-wrap allows items to reflow onto new lines when the container is too narrow. Common for tag clouds, badge groups, and responsive button bars.

flex-nowrap (default) — items overflow

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

flex-wrap — items reflow

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

5. Grow / Shrink / Basis

Controls how individual items fill available space. flex-1 = grow + shrink + basis 0 (equal share). flex-none = fixed size, no flex.

flex-1 — all items share space equally

flex-1

mixed: grow + fixed + shrink

flex-1 (grows)

flex-none

flex-1 with long text that will truncate gracefully

flex-basis — explicit starting size before flex kicks in

basis 8rem

basis 14rem

basis 6rem

6. Gap Scale

Use gap-* instead of margins between flex children. Gaps do not collapse and respect flex-wrap rows too.

gap-1 (4px)

A

B

C

D

gap-2 (8px)

A

B

C

D

gap-4 (16px)

A

B

C

D

gap-6 (24px)

A

B

C

D

gap-8 (32px)

A

B

C

D

7. Real-world Patterns

Practical compositions you'll reach for most often in a builder context.

Toolbar — icon + stretched title + actions

☰

Page title that can be very long and will truncate

Save

⋯

Media object — avatar + body text block

AV

Username

Comment body that wraps naturally because the container is flex-col

Inline form row — input grows, button fixed

Email address input

Subscribe

Centered hero — flex-col + items-center + justify-center

Headline

Subheadline

CTA Button

Footer row — justify-between with wrapping columns

Brand

Links

Legal

Social

8. Interactive Playground

Combine any props live. The generated Tailwind classes are shown below the preview.

Direction Justify Align Items Wrap Gap Items

Generated classes

9. Edge Cases

Scenarios that break naive implementations. Always test with real data.

Zero items — empty container should not collapse layout

No items to display

Long single word — min-w-0 + truncate prevents overflow

Label

Supercalifragilisticexpialidocious-slug-that-overflows-without-min-w-0

Many items with wrap — 20 tags, container ~400px wide

Design

UX

UI

Tailwind

DaisyUI

Alpine

Commerce

Layout

Flex

Grid

CSS

HTML

Builder

Widget

Block

Token

Theme

Dark

Light

Responsive