flex flex-col
These items stack vertically by default. No
flex flex-col
is needed here.
flex flex-col
for Benefits
Here,
flex flex-col
is used to enable
items-end
(horizontal alignment) and
space-y-2
(spacing).
The "Gotcha" is:
Simply applying
flex flex-col
to a parent of elements that already stack vertically by default (like
<div>
s) might seem redundant if you're not also using other flexbox utilities.
You only *need*
flex flex-col
when you intend to leverage flexbox capabilities such as:
items-center
,
items-start
,
justify-content
).
space-y-*
,
gap-*
with flexbox).
Otherwise, the natural block flow often achieves basic vertical stacking.