Example 2: Using `flex flex-col` for Enhanced Stacking

While block elements stack vertically by default, using `flex flex-col` gives you access to Flexbox's powerful alignment and spacing utilities for items within the column.

Stack with `flex flex-col` and `space-y-4`

Flex Item 1
Flex Item 2
Flex Item 3

Stack with `flex flex-col` and `items-center`

Centered Flex Item A
Centered Flex Item B
Centered Flex Item C

Gotcha Demonstrated:

In the second sub-example above ("Stack with `flex flex-col` and `items-center`"), we use `items-center`. This horizontally centers the items within their vertical stack. This kind of alignment is a key reason to use `flex flex-col` rather than relying solely on default block behavior. Without `flex flex-col`, `items-center` would have no effect on these plain `div`s in terms of their stacking context. Similarly, `space-y-*` utilities for spacing between flex items only work in a flex container.