Tailwind: Vertical Stacking - Gotcha Demonstration

Scenario 1: Default Block Stacking

Block Item A

Block Item B (wider)

Block Item C

These items stack vertically due to their default block behavior. If this is all you need, `flex flex-col` is not required. Notice how items take full width and are left-aligned by default.

Scenario 2: `flex flex-col` for Alignment & Spacing

Flex Item X (Centered)

Flex Item Y (Centered)

Flex Item Z (Centered)

Here, flex flex-col is used. The "Gotcha" is that while `div`s stack by default, using `flex-col` allows us to easily apply items-center to horizontally center the items within the column and space-y-3 for consistent vertical spacing. This level of control is why you'd choose `flex-col` over default block behavior.

"Gotcha" Summary:

Many elements like `div`s or `p`aragraphs stack vertically by default (they are block-level elements). You only *need* to explicitly use flex flex-col if:

You want to use flexbox alignment properties (e.g., items-center for horizontal centering within the column, items-start , items-end ).
You want to use flexbox justification properties for the column (e.g., justify-center , justify-between - though this has more effect if the flex container has a fixed height).
You want to use flexbox spacing utilities like space-y-* .
The parent element is already a flex container and you want its children to form a column within that flex context.

Otherwise, default block behavior might be sufficient for simple vertical stacking.

Example 3: Addressing the "Gotcha"

Scenario 1: Default Block Stacking

Scenario 2: `flex flex-col` for Alignment & Spacing

"Gotcha" Summary: