Flexbox in Tailwind CSS allows you to create responsive layouts that adapt beautifully to any screen size. Let’s dive into the key utilities and how to use them effectively.
- Example Code (first div) : className="flex flex-col sm:flex-row items-center justify-between gap-8 sm:gap-12 w-full max-w-7xl px-8 py-12 sm:px-16 sm:py-16 rounded-xl shadow-xl"
- Example Code (individual divs i.e 3) : className="bg-white h-[210px] p-8 rounded-xl shadow-md w-full sm:w-1/3 transform hover:scale-105 transition-all duration-300 ease-in-out"
sm:flex-row so that the boxes on small screens will be arranged in multiple rows and 1 column.
flex-col for screens above sm so that the boxes will be arranged in multiple columns and 1 row.
w-full and sm:w-1/3, so that beyond sm will take up a 1/3 because they are in rows, while larger than sm takes on the full width because they are in columns.
Tailwind CSS provides powerful utilities for Flexbox. Here's a quick rundown of the most important ones:
The flex utility defines a flex container, enabling the use of Flexbox properties for layout and alignment.
The flex-col utility sets the flex direction to column, stacking child elements vertically.
On small screens and above, sm:flex-row sets the flex direction to row, aligning child elements horizontally.
The items-center utility aligns child elements along the cross-axis (vertical in a row layout, horizontal in a column layout).
The justify-between utility distributes child elements along the main axis with space between them.
Flexbox and Grid are both powerful layout systems. Here's a quick comparison: