nicht angemeldet
Flexbox habe ich ja soweit einmal verstanden und angewendet (sh. Musterseite im Web). Trotzdem tauchen immer wieder neue Fragen auf da ich ja jedes Element (u. CSS) versuche auf verschiedene Weise auszuprobieren um die verschiedenen Wirkungsweisen zu erlernen.
Die Flexbox bekommt automatisch die Höhe durch den Inhalt in den items bzw. der Höhe die man den items zuweist. Auch eine Breite kann ich den items geben. Wenn ich nun der Flexbox eine bestimmte Größe gebe kann ich die items senkrecht und waagrecht verschieben. Sobald ich aber im Beispiel dem "header" eine Breite von 100% gebe und einen wrap dadurch erzwinge geschieht es, daß zwischen dem header und den zwei anderen ein Leerraum entsteht. Woher und wodurch kommt dieser? Oder übersehe ich beim code etwas?
<!doctype html>
<html lang="de">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 800px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
outline: 1px solid;
}
/*************/
header {
height: 80px;
<!--width: 100%;-->
background-color: red;
outline: 1px solid;
}
nav {
margin-top: 0;
width: 400px;
background-color: green;
outline: 1px solid;
}
footer {
width: 400px;
background-color: blue;
outline: 1px solid;
}
</style>
</head>
<body>
<header>
<p>header</p>
</header>
<nav>
<p>Navigator</p>
<p>Navigator</p>
<p>Navigator</p>
<p>Navigator</p>
</nav>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Die Überlegung ist, den "header" in die Flexbox miteinzubeziehen aber er soll an oberster Stelle zu stehen kommen. Das gleiche sollte mit dem "footer" passieren.
Sinnvoller scheint mir den header und footer nicht miteinzubeziehen, wodurch sie automatisch an den Anfang bzw. Ende kommen.
LG Franz
Matthias Apsel
Camping_RIDER
Auge