Gotcha: `justify-*` vs `gap-*`
Gotcha Explanation:
`justify-*` classes control spacing along the main axis (horizontal for `flex-row`, vertical for `flex-col`). This means they distribute *all available free space*. `gap-*` is often simpler for adding consistent space *only between* items, regardless of remaining container space. `gap-*` works for both flexbox and grid.
`justify-between` with `flex-row`
Distributes space along the horizontal (main) axis. Items are pushed to the edges.
Row Item 1
Row Item 2
Row Item 3
`justify-between` with `flex-col`
Here, the main axis is vertical. `justify-between` pushes items to the top and bottom of the container.
{/* Added h-64 for visual space */}
Col Item 1
Col Item 2
Col Item 3
Using `gap-4` with `flex-row` for Simplicity
`gap-4` adds 1rem of space *between* items. It doesn't affect space at the container edges unless other alignment properties are used (like `justify-center`).
Gap Row 1
Gap Row 2
Gap Row 3
Using `gap-4` with `flex-col`
`gap-4` consistently adds space between items vertically in a column layout.
Gap Col 1
Gap Col 2
Gap Col 3