Flexbox & Cards

Review: Your Styled Header

In Stage 2, you styled the header, h1, and h4. Your page now has a distinct, colorful header. But the three cards below it are stacked vertically - one on top of another.

In this stage, you'll use Flexbox to arrange them side by side, and give each card a clean white background.

What Is Flexbox?

Flexbox is a CSS layout tool that automatically arranges child elements in a row or column. It's one of the most useful things in CSS.

display: flex puts children side by side automatically

You apply Flexbox to the parent container - the .container - and it arranges the children (the .card sections) for you.

Style the .container

The <main class="container"> wraps your three cards. Let's style that class to activate Flexbox.

• display: flex - switches the container from the default stacking layout to Flexbox. Without this one line, children stack vertically (one below the other). With it, they automatically line up side by side in a row.
• justify-content: center - controls where the cards sit along the horizontal axis. center pushes everything toward the middle of the page. Other options include flex-start (left edge), flex-end (right edge), and space-between (spread out with gaps).
• gap: 20px - adds 20px of empty space between each card. This is cleaner than adding a margin to each card individually, because the gap only appears between items - not on the outside edges.
• flex-wrap: wrap - lets cards drop to a new row when the screen is too narrow to fit them all. Without this, Flexbox would squeeze all cards into one line and make them tiny on a phone. With it, the layout gracefully adjusts to smaller screens.
• padding: 40px 20px - adds space inside the container, between its edges and the cards. Two values is a shorthand: the first number (40px) sets top and bottom padding, the second (20px) sets left and right. So cards won't be pinched against the top or sides of the main area.

Style the .card

Now let's give each card a white background, rounded corners, and some padding. Notice the selector uses a dot: .card - that targets any element with class="card".

• background-color: white - gives each card a white fill that pops visually against the blue-gray page background. Without it, the cards would be transparent and blend into the page.
• border-radius: 8px - rounds each corner of the card by 8 pixels. Flat 90-degree corners feel rigid; a gentle radius makes cards look polished and modern. Most card-based interfaces today use between 6px and 16px.
• width: 320px - locks every card to the same fixed width. Without a set width, Flexbox would try to stretch or shrink them to fill available space, making them uneven. 320px fits three cards comfortably on most laptop screens with a 20px gap between them.
• text-align: left - overrides the text-align: center you set on body. Card text is much easier to read left-aligned, especially when there's more than one sentence. CSS rules cascade down from parent to child, but a more specific rule like this one always wins.

Check Your Layout

Look at the preview. You should see three white cards arranged side by side on the blue-gray background. If they're still stacking vertically, double-check that display: flex is inside .container { } - not inside .card { }.

Make It Your Own!

Now that the cards are laid out, experiment:

• Try changing gap: 20px to gap: 40px - what happens?
• Try width: 280px or width: 360px on .card
• Change border-radius: 8px to border-radius: 20px for rounder cards
• Fill in some real words in your card <p> tags - what's your actual future in tech?