📱 Flex-Wrap That Stacks
Column on Mobile → Row on Desktop
📱
Mobile: Column
On phones (below 768px), these cards stack vertically. One after
another. Easy to scroll.
💻
Desktop: Row
On desktops (768px and above), these cards become a horizontal row.
🔄
Flex-Wrap
If there are more cards, they wrap to the next row automatically.
📚 What You Learned
-
Mobile (default):
flex-direction: column — cards stack vertically
-
Desktop (min-width: 768px):
flex-direction: row — cards become horizontal
-
flex-wrap: wrap — allows cards to move to next row
if needed
-
flex: 1 1 calc(33.333% - 20px) — each card takes
1/3 of the width
/* =================================== MOBILE FIRST (default)
=================================== */ .cards { display: flex;
flex-direction: column; /* Stack vertically on mobile */ gap: 20px; } /*
=================================== DESKTOP (min-width: 768px)
=================================== */ @media (min-width: 768px) {
.cards { flex-direction: row; /* Horizontal row on desktop */ flex-wrap:
wrap; /* Wrap to next line */ } .card { flex: 1 1 calc(33.333% - 20px);
/* 3 cards per row */ } }