Opdracht: Gebruik van Flexbox

Stap 1: Structureren van je HTML

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

<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.

<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

/* 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.

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

CSS

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

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.

<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.

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

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