Flexbox ist eine flexibele Methode, um Inhalte in Reihen oder Spalten zu ordnen, die sich an die Verfügbare Größe anpassen. Wir verwenden die Klasse .header, .content, und .sidebar mit den Flexbox-Eigenschaften display: flex; und justify-content: space-around;. Dies ermöglicht es, die Container gleichmäßig an der Seite zu verteilen. Hier ist ein Beispiel:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein Blog</title>
<style>
.container {
display: flex;
justify-content: space-around;
}
.header, .content, .sidebar {
margin: 10px;
padding: 10px;
}
.header { background-color: #4CAF50; color: white; }
.content { background-color: #f4f4f4; }
.sidebar { background-color: #ddd; }
</style>
</head>
<body>
<div class="container">
<div class="header">Mein Blog</div>
<div class="content">
<h1>Willkommen bei meinem Blog</h1>
<p>Ein interessanter Beitrag über CSS Flexbox.</p>
</div>
<div class="sidebar">Rechtlicher Hinweis</div>
</div>
</body>
</html>