Row
Horizontal flex container for column-based layouts. Controls direction, wrapping, gap, alignment, and justification.
Base Row
The simplest form: flex flex-row on a container. Children line up horizontally; no wrapping by default.
Three equal children — default alignment is stretch for height, flex-start for justify.
Gap Scale
Use gap-* to set space between children uniformly. Prefer gap over margins — it composes cleanly with wrapping rows.
gap-1 (4px)
gap-2 (8px)
gap-4 (16px)
gap-6 (24px)
gap-8 (32px)
Justify Content
Controls how children are distributed along the main axis (horizontal for a row).
justify-start
Pack to the left
justify-center
Center the group
justify-end
Pack to the right
justify-between
Space between — first/last touch edges
justify-around
Equal space around each child
justify-evenly
Truly equal gaps between and around
Align Items
Controls how children are aligned on the cross axis (vertical). Requires children of mixed or intrinsic height to see the difference.
items-start
Snap to top
items-center
Center vertically
items-end
Snap to bottom
items-stretch
Stretch to fill row height (default)
items-baseline
Align text baselines
Wrap Behaviour
By default flex rows do not wrap. Add flex-wrap to allow children to flow onto new lines when they overflow.
flex-nowrap (default)
Overflow hidden — items may be clipped.
flex-wrap
Children reflow onto the next line.
Reverse Direction
flex-row-reverse reverses the visual order without changing DOM order — useful for RTL or mirror layouts without touching markup.
flex-row
flex-row-reverse
Grow & Shrink
Combine flex-1 (grow + shrink) with fixed-width siblings for classic sidebar / main layouts.
Fixed + flex-1 + Fixed
flex-1 + flex-2 ratio
flex-shrink-0 guard
Interactive Playground
Adjust the controls to explore how flex row properties compose.
Generated class:
Real-world Patterns
Common layouts built entirely from row + alignment utilities.
Topbar — logo + nav + actions
Media object — thumbnail + text
Form row — label + input + button
Row vs other layout primitives
- Row — one-dimensional horizontal container. Use when children are inline and you control main-axis distribution.
- Grid — two-dimensional. Use when you need both row and column control, or when children must snap to named areas.
- Column — a child unit inside a Row or Grid. Controls its own span, growth, and offset within the parent track.
- flex-wrap — turn a row into a tag-cloud or chip-group. For strict multi-row grids, prefer CSS Grid.