In deze oefening gaan jullie een eenvoudige website lay-out maken met behulp van CSS Flexbox. De website bestaat uit een header, een navigatiebalk, twee kolommen in het hoofdgedeelte, en een footer. Het doel is om de lay-out te stylen met Flexbox, zodat de elementen correct worden uitgelijnd en de website op verschillende schermformaten werkt.
<!doctype html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Oefening</title>
<link rel="stylesheet" href="styles/flexbox-style.css">
</head>
<body>
<div class="container">
<header>
<h1>Welkom op mijn website</h1>
</header>
<nav>
<ul class="main_nav">
<li><a href="#">Home</a></li>
<li><a href="#">Over mij</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<div class="column_1">Kolom 1</div>
<div class="column_2">Kolom 2</div>
</main>
<footer>
<p>© 2024 Mijn Website</p>
</footer>
</div>
</body>
</html>
display van .container op flex en gebruik flex-direction: column zodat de elementen onder elkaar komen.main-element een flex-container zodat de kolommen naast elkaar staan. Zorg ervoor dat één kolom iets breder is dan de andere.Voeg een media query toe voor schermen kleiner dan 600px. In deze media query zorg je ervoor dat de kolommen in het hoofdgedeelte onder elkaar verschijnen in plaats van naast elkaar.
/* Standaard box-sizing instellen zodat padding en borders binnen de breedte en hoogte vallen */
* {
box-sizing: border-box;
margin: 0; /* Verwijdert standaardmarges */
padding: 0; /* Verwijdert standaardpadding */
}
/* Instellen van een basislettertype voor het hele document */
body {
font-family: Arial, sans-serif;
}
/* Container die de flexbox lay-out voor de volledige pagina bevat */
.container {
display: flex; /* Activeert flexbox in de container */
flex-direction: column; /* Flex-items (zoals header, main, footer) worden verticaal gestapeld */
min-height: 100vh; /* Zorgt ervoor dat de container minimaal de volledige schermhoogte vult */
}
/* Stijlen voor de header, geeft een achtergrondkleur en padding */
header {
background-color: lightgray;
padding: 1rem; /* Voeg padding toe rond de inhoud */
text-align: center; /* Centreert de tekst horizontaal */
}
/* Achtergrondkleur voor de navigatiebalk */
nav {
background-color: black;
}
/* Hoofd navigatiebalk met flexbox */
.main_nav {
display: flex; /* Maakt de lijst een flexcontainer */
justify-content: center; /* Centreert de lijstitems horizontaal */
padding: 1rem; /* Voeg padding toe rond de navigatie */
}
/* Verwijdert standaard opsommingsteken van de lijst */
.main_nav li {
list-style: none;
margin: 0 1rem; /* Voegt horizontale ruimte toe tussen de lijstitems */
}
/* Links in de navigatiebalk: wit en zonder onderstreping */
.main_nav li a {
color: white; /* Tekstkleur wit */
text-decoration: none; /* Verwijdert de standaard onderstreping van links */
}
/* Main sectie met twee kolommen */
main {
display: flex; /* Maakt het een flexcontainer voor de twee kolommen */
justify-content: space-between; /* Verdeelt ruimte gelijk tussen de kolommen */
padding: 2rem; /* Voeg padding toe rond de hoofdinhoud */
gap: 1rem; /* Voeg een ruimte toe tussen de kolommen */
}
/* Eerste kolom: 30% breedte en grijze achtergrond */
.column_1 {
background-color: gray;
flex-basis: 30%; /* Kolom neemt 30% van de beschikbare breedte in */
padding: 2rem; /* Voeg padding toe binnen de kolom */
text-align: center; /* Centreert de tekst in de kolom */
}
/* Tweede kolom: 70% breedte en groene achtergrond */
.column_2 {
background-color: green;
flex-basis: 70%; /* Kolom neemt 70% van de beschikbare breedte in */
padding: 2rem; /* Voeg padding toe binnen de kolom */
text-align: center; /* Centreert de tekst in de kolom */
}
/* Footer met zwarte achtergrond en witte tekst */
footer {
background-color: black;
color: white;
text-align: center; /* Centreert de tekst horizontaal */
padding: 1rem; /* Voeg padding toe rond de inhoud */
margin-top: auto; /* Zorgt ervoor dat de footer aan de onderkant van de pagina blijft */
}
/* Stijlen voor afbeeldingen om ze responsief te maken */
img {
max-width: 100%; /* Zorgt ervoor dat afbeeldingen niet groter worden dan hun container */
width: 100%; /* Zorgt ervoor dat afbeeldingen de volledige breedte van hun container innemen */
height: auto; /* Zorgt ervoor dat de beeldverhouding behouden blijft */
}
/* Media query voor kleine schermen: past lay-out aan voor apparaten met een schermbreedte van 600px of kleiner */
@media (max-width: 600px) {
main {
flex-direction: column; /* Stapelt de kolommen verticaal in plaats van horizontaal */
}
}