BLOCKS / LAYOUT
Flex block
A flexible layout container built on CSS Flexbox. Arrange content in rows or columns with full control over direction, wrapping, alignment, and spacing.
Row vs column
flexDirection controls the main axis. “row” lays children side by side, “col” stacks them vertically. gapX / gapY add space between items along each axis.
flexDirection: “row” · gapX: “3”
A
B
C
flexDirection: “col” · gapY: “3”
A
B
C
Responsive stacking
flexDirection: “col” on mobile, flexDirectionMd: “row” on tablet+. The classic pattern for image + text sections that stack on small screens and sit side by side on larger ones.
Built to adapt
On mobile the image sits above the text. From the md breakpoint (≥768px) up, they sit side by side — no separate mobile layout needed, just two responsive attributes on the same block.
Justify content
Positions items along the main axis. All six values are supported: start, center, end, between, around, evenly.
start
center
end
between
around
evenly
Align items
Positions items along the cross axis. Boxes of different heights make the effect visible.
start
center
end
stretch
Wrap
Controls whether children wrap onto a new line when they run out of room in the row. Six fixed-width boxes in a narrow container.
No Wrap
Items shrink or overflow the container.
Wrap
Items flow onto the next line when they don’t fit.
Wrap Reverse
1
2
3
4
5
6
Same as wrap, but new lines stack upward.
Gap scale
gapX and gapY use the same Tailwind scale, from 0 to 16 (0– 4rem).
gapX: “2” (8px)
gapX: “6” (24px)
Real-world example
Icon, heading, description, and a button, laid out with two nested flex-blocks: a column for the icon+heading row, and a row inside that for the icon and title. Common pattern for feature cards.
Fast by default
No extra configuration needed to get a responsive, well-aligned layout — the sensible defaults cover most content patterns out of the box.