H10 - Flexbox

01 - Layout is hard: play the game

Layout is often the first thing you need when building a website, but it is also one of the hardest parts of web design. That is why it appears later in this course.

Flexbox is a modern CSS technique for placing items in one direction: a row or a column. Practice with Flexbox Froggy. Play the game. Really: play the game.

Open Flexbox Froggy.
Move the frogs to the correct lily pads.
Type flexbox rules in the editor.
Read each level carefully and understand why the frog moves.

Practice

Create a small flexbox with three items and apply this property.
Change one flex value and see how the position or spacing changes.

02 - Flex container and flex items

Set display: flex on the parent. Its direct children become flex items.

.container {
    display: flex;
}

Practice

Create a small flexbox with three items and apply this property.
Change one flex value and see how the position or spacing changes.

03 - Direction: row or column

.container {
    display: flex;
    flex-direction: row;
}

.menu {
    display: flex;
    flex-direction: column;
}

Practice

Create a small flexbox with three items and apply this property.
Change one flex value and see how the position or spacing changes.

04 - Horizontal distribution with justify-content

.container {
    display: flex;
    justify-content: space-between;
}

justify-content works along the main direction.

Practice

Create a small flexbox with three items and apply this property.
Change one flex value and see how the position or spacing changes.

05 - Vertical alignment with align-items

.container {
    display: flex;
    align-items: center;
}

Practice

Create a small flexbox with three items and apply this property.
Change one flex value and see how the position or spacing changes.

06 - Space between items with gap

.container {
    display: flex;
    gap: 1rem;
}

Practice

Create a small flexbox with three items and apply this property.
Change one flex value and see how the position or spacing changes.

07 - Letting items wrap with flex-wrap

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

Practice

Create a small flexbox with three items and apply this property.
Change one flex value and see how the position or spacing changes.

08 - Making flex items grow or shrink

.card {
    flex: 1 1 220px;
}

This means: the item may grow, may shrink and starts around 220 pixels wide.

Practice

Create a small flexbox with three items and apply this property.
Change one flex value and see how the position or spacing changes.

09 - Practical example: cards next to each other

<section class="cards">
    <article class="card">One</article>
    <article class="card">Two</article>
    <article class="card">Three</article>
</section>

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.card {
    flex: 1 1 220px;
}

Practice

Create a small flexbox with three items and apply this property.
Change one flex value and see how the position or spacing changes.

10 - Best practices

Use flexbox for layout in one direction.
Use gap instead of margins between flex items when possible.
Use flex-wrap for rows of cards.
Use grid for full page layouts with rows and columns.

Practice

Create a small flexbox with three items and apply this property.
Change one flex value and see how the position or spacing changes.

11 - Assignment

Practice

Create a navigation menu with a ul.
Use flexbox to place the menu items in a row.
Create three cards and place them next to each other with flexbox.
Use gap for spacing.

Quiz