# Opdracht: Gebruik van Flexbox

### Stap 1: Structureren van je HTML

Pas je `index.html` aan om een flex container en flex items te hebben.

```html
<body>
    <header>
        <h1>Mijn Website</h1>
    </header>
    <nav>
        <ul class="nav-list">
            <li><a href="#home">Home</a></li>
            <li><a href="#over">Over Mij</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <main>
        <section class="intro">
            <!-- Inhoud -->
        </section>
        <section class="hobbies">
            <!-- Inhoud -->
        </section>
    </main>
    <footer>
        <p>&copy; 2023 Mijn Naam</p>
    </footer>
</body>
```

### Stap 2: Maak je Navigatie Responsief met Flexbox

#### HTML

Zorg ervoor dat je navigatie-items binnen een `<ul>` staan met de class `nav-list`.

```html
<nav>
    <ul class="nav-list">
        <li><a href="#home">Home</a></li>
        <li><a href="#over">Over Mij</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>
```

#### CSS

```css
/* Maak de nav-list een flex container */
.nav-list {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    background-color: #00539C;
}

/* Stijl de navigatielinks */
.nav-list li {
    margin: 0 15px;
}

.nav-list a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.nav-list a:hover {
    text-decoration: underline;
}
```

### Stap 3: Layout van de Hoofdinhoud met Flexbox

#### HTML

In je `main`-element heb je twee secties: `.intro` en `.hobbies`.

```html
<main>
    <section class="intro">
        <!-- Inhoud -->
    </section>
    <section class="hobbies">
        <!-- Inhoud -->
    </section>
</main>
```

#### CSS

Maak van `main` een flex container en pas de layout aan.

```css
main {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 20px;
}

/* Stijl de secties */
main section {
    flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
    margin: 10px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
}
```

**Uitleg:**

- `flex-direction: row;` zorgt ervoor dat de secties naast elkaar staan.
- `flex-wrap: wrap;` zorgt ervoor dat de secties naar een nieuwe regel gaan als er niet genoeg ruimte is.
- `flex: 1 1 300px;` betekent: 
    - `flex-grow: 1;` – het item kan groeien als er ruimte is.
    - `flex-shrink: 1;` – het item kan krimpen als er minder ruimte is.
    - `flex-basis: 300px;` – de startbreedte is 300px.

### Stap 4: Responsieve Afbeeldingen met Flexbox

#### HTML

Zet je afbeeldingen binnen een container.

```html
<section class="gallery">
    <img src="afbeelding1.jpg" alt="Afbeelding 1">
    <img src="afbeelding2.jpg" alt="Afbeelding 2">
    <img src="afbeelding3.jpg" alt="Afbeelding 3">
</section>
```

#### CSS

Maak van `.gallery` een flex container.

```css
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px;
}

.gallery img {
    flex: 1 1 200px;
    max-width: 300px;
    margin: 10px;
    height: auto;
}
```

</body>