# Afronding CSS Layouts en Flexbox

In dit hoofdstuk heb je het volgende geleerd:

- **Het CSS Box Model**: Begrip van margins, borders, padding en content en hoe deze de layout beïnvloeden.
- **Introductie tot Flexbox**: Hoe je flex containers en flex items opzet en stylet.
- **Flexbox Eigenschappen**: Gebruik van `flex-direction`, `justify-content`, `align-items`, `flex-wrap`, en `flex`.
- **Praktische Toepassing**: Je webpagina herstructureren met Flexbox voor een responsieve en flexibele layout.

### Extra Hulpbronnen

- **W3Schools Flexbox Tutorial**: <a rel="noopener" target="_new">https://www.w3schools.com/css/css3\_flexbox.asp</a>
- **MDN Web Docs - Flexbox**: [https://developer.mozilla.org/nl/docs/Web/CSS/CSS\_Flexible\_Box\_Layout/Basic\_Concepts\_of\_Flexbox](https://developer.mozilla.org/nl/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
- **Flexbox Froggy**: [https://flexboxfroggy.com/](https://flexboxfroggy.com/) – Een leuke manier om Flexbox te oefenen.

### Veelgestelde Vragen

#### Mijn flex items overlappen of worden niet correct weergegeven. Wat kan ik doen?

- **Controleer je HTML-structuur**: Zorg ervoor dat je de juiste elementen als flex container hebt ingesteld.
- **Bekijk je CSS-selectors**: Zijn ze correct toegepast op de juiste elementen?
- **Gebruik de ontwikkelaarstools**: Inspecteer de elementen om te zien welke CSS-regels worden toegepast.

#### Hoe maak ik mijn layout responsief met Flexbox?

- **Gebruik flex-wrap**: Dit zorgt ervoor dat items naar een nieuwe regel gaan als er niet genoeg ruimte is.
- **Gebruik percentages of flex-grow**: Hierdoor passen items zich aan de beschikbare ruimte aan.
- **Gebruik media queries**: Pas de layout aan op basis van schermgrootte.

### Vragen of Hulp Nodig?

Als je vragen hebt of ergens tegenaan loopt:

- **Stel je vraag in de klas** of aan je docent.
- **Oefen met online tools** zoals Flexbox Froggy om je begrip te verbeteren.
- **Raadpleeg de extra hulpbronnen** voor meer informatie en voorbeelden.