Hoe maak je een eenvoudige website responsive met Flexbox
In deze tutorial leer je hoe je een eenvoudige website maakt met Flexbox en hoe je deze responsive maakt met flex-direction: column;.
HTML-structuur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website met Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<h1>Mijn Website</h1>
</header>
<div class="container">
<section class="box">Sectie 1</section>
<section class="box">Sectie 2</section>
<section class="box">Sectie 3</section>
</div>
<footer class="footer">
<p>Copyright © 2024</p>
</footer>
</body>
</html>
CSS-styling
/* Basisopmaak */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* Header-styling */
.header {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
}
/* Container-styling */
.container {
display: flex; /* Gebruik Flexbox voor layout */
justify-content: space-around; /* Verspreid items met ruimte ertussen */
padding: 20px;
gap: 20px; /* Voeg ruimte tussen de secties toe */
background-color: #f4f4f4;
}
/* Sectie-styling */
.box {
flex: 1; /* Zorg dat de secties even groot zijn */
padding: 20px;
background-color: #ccc;
text-align: center;
}
/* Footer-styling */
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
/* Responsiviteit */
@media (max-width: 768px) {
.container {
flex-direction: column; /* Stapel de secties onder elkaar */
align-items: center; /* Centreer de secties horizontaal */
}
.box {
width: 100%; /* Zorg dat de secties de volledige breedte benutten */
}
}
Resultaat
Op grotere schermen worden de secties naast elkaar weergegeven dankzij display: flex;. Op kleinere schermen (maximaal 768px breed) worden de secties onder elkaar gestapeld door gebruik te maken van flex-direction: column;. Hierdoor blijft de website goed leesbaar op mobiele apparaten.
Tip
Experimenteer met de waarden van gap en padding om de layout verder aan te passen. Je kunt ook align-items aanpassen om de secties beter uit te lijnen.