In dieser Lektion lernst du die flexibles Layout-System Flexbox und das Grid-System kennen, die es dir ermöglichen, komplexere und ansprechendere Seiten zu erstellen. Flexbox ist besonders nützlich, wenn du Elemente horizontale oder vertikale Reihen anordnen möchtest, während Grid ein komplexeres System ist, das es dir ermöglicht, komplexere, multidirektionale Layouts zu erstellen. Wir werden beginnen, indem wir ein einfaches Beispiel mit Flexbox erstellen. Hier ist der HTML-Code für ein einfaches Layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>