Oefening: Basis Flexbox Lay-out

Doel:

Maak een responsive webpagina met een header, een contentgedeelte met drie artikelen, en een footer, met gebruik van Flexbox.

Vereisten:

Header en Footer:

• Beide moeten de volledige breedte van de pagina beslaan.
• Minimale hoogte: 100px.
• Tekst gecentreerd.

Contentgedeelte:

• Bevat drie artikelen (divs of secties).
• Elk artikel moet evenveel ruimte innemen op de hoofdas.
• Moet passend worden uitgelijnd en verdeeld over de gehele breedte van de pagina.

Responsive Ontwerp:

• Op mobiele apparaten (scherm minder dan 600px breed) moeten de artikelen onder elkaar worden weergegeven.
• Op desktopschermen moeten de artikelen naast elkaar worden weergegeven.

Instructies:

• Gebruik Flexbox om de layout te stylen.
• Zorg ervoor dat de header en footer gecentreerd zijn en de volledige breedte van de pagina beslaan.
• Gebruik Flexbox om de artikelen naast elkaar te plaatsen op desktopschermen en onder elkaar op mobiele schermen.
• Experimenteer met justify-content en align-items om verschillende uitlijningen en ruimteverdelingen te verkennen.
• Voeg een mediaquery toe om de flex-direction te veranderen voor mobiele schermen.

Uitdaging:

Als extra uitdaging, voeg hover-effecten toe aan de artikelen en experimenteer met verschillende flex-grow en flex-shrink waarden om te zien hoe de flex-items zich aanpassen.