Flexbox

Master one-dimensional layouts. Experiment with direction, alignment, and wrapping to instantly generate Tailwind Flexbox utility classes.

Layout Properties

Spacing & Items

Flex Container
1
2
3
class="flex flex-row items-stretch gap-4"

iFlexbox Master Rules

Flexbox is a one-dimensional layout system. It handles either rows OR columns, but rarely both simultaneously.

✨ The Main Axis vs. Cross Axis: This is the secret to Flexbox. If `flex-direction` is `row`, the Main Axis is horizontal (Left to Right) and the Cross Axis is vertical.

• `justify-content` always aligns items along the Main Axis.
• `align-items` always aligns items along the Cross Axis.
⚠️ Wrapping Behavior: By default, Flexbox will squash all children onto a single line (`nowrap`), regardless of their width. To allow children to break onto a new line, you must explicitly set `flex-wrap` to `wrap`.