Flexbox in Tailwind
The flex utility enables flex layout. Combine it with flex-row, flex-col, items-center, justify-between, gap-*, grow, shrink and basis utilities.
Parent controls the relationship
Alignment between children belongs on the flex container. Individual children can then control how much space they take with growth, shrinkage and basis.
Responsive flex layouts
A common mobile-first pattern is flex-col md:flex-row, which stacks content on small screens and changes to a horizontal layout on larger screens.
ADVERTISEMENT