Cards in a Row

What this page does

1. It shows three cards in a row, centred on the page.
2. Point at a card. It lifts and its border changes colour.
3. Make the window narrow. The third card drops onto a second line on its own.

Flexbox in one sentence

Put display: flex on a box. The children of that box then line up in a row. Without it they stack down the page.

.deck {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

Everything else in flexbox is a detail of that one idea.

In index.html, the <div class="deck"> is the parent. The three <div class="card"> blocks are its children. Comment out display: flex and they stack again, one per line. That is what a <div> does on its own.

Values worth trying

These two properties take words, not numbers. That is why they have no slider. Change one in index.css, look at the page, then change it back.

Reading that list teaches nothing. Watching the page move teaches it fast. First make one card's quote much longer. The cards then have different heights, so align-items has something to do.

One class, three cards

All three cards say class="card". So one .card rule styles all of them. Change the rule and all three cards change together. That is the reason to use classes. It is also why the one card in the last lesson was worth building properly.

Copy a whole card block to make a fourth card. It appears fully styled, because it has the same class.

Hover, and moving things

.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
    transform: translateY(-8px);
}

• :hover is a pseudo-class. It only applies while the pointer is over the element. You used one in Geological Wonders, on a table row.
• transform: translateY moves an element up or down. Negative numbers move it up. That is because Y is measured downwards on a screen.
• transition goes on the normal rule, not the hover rule. It tells the browser to take 0.2 seconds when the property changes. Without it, the change jumps.

Build it step by step

Start with your finished card from lesson 4. This lesson adds one wrapper and one rule.

1. 1

   Copy the card twice

   In index.html, copy the whole <div class="card"> block so you have three cards. Change the names, the emoji, and the quotes. Reload. They stack down the page.

2. 2

   Wrap them

   Put one <div class="deck"> around all three cards. Reload. Nothing changes, because a div on its own does nothing. That is worth seeing.

3. 3

   Turn on flex

   Add a .deck rule with one line in it. Reload. The cards are in a row.

   .deck {
       display: flex;
   }

4. 4

   Add the gap

   The cards are touching. Add gap: 1.5rem. Try 0, then 4rem, then put it back.

5. 5

   Handle a narrow window

   Drag the window narrow. The cards squash. Add flex-wrap: wrap and try again. Now the last card moves to a new line instead.

6. 6

   Place the row

   Add justify-content: center and align-items: flex-start. Try the other values from the tables above before you decide.

7. 7

   Add the hover

   Write the .card:hover rule with transform, box-shadow, and border-color. Then add transition to the .card rule and point at a card again.