HTML/CSS?
Hallo,
ich möchte das container (das graue Box) ganz nach unten schieben. Aber es funktioniert nicht. ich habe schon align-items ausprobiert, justify-content aber es geht nicht(((((((. Vielleicht findet ihr einen Fehler in meinem Code. Bitte helft mir.
P.S Wir dürfen nicht margin, position etc. benutzen da diese Hausaufgaben nur mit Flexbox gemacht werden sollen (Unser aktuelles Thema).
CSS-CODE:
* {
margin: 0;
box-sizing: border-box;
}
.layout2 {
display: flex;
align-items: flex-end;
justify-content: flex-end;
flex-direction: column;
}
.container {
height: 150px;
width: 1425px;
background-color: rgb(80, 98, 104);
}
.item {
background-color: rgb(39, 185, 171);
width: 120px;
height: 50px;
color: #fff;
font-weight: bold;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: large;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
.item1 {
background-color: rgb(193, 67, 67);
width: 115px;
height: 50px;
color: #fff;
font-weight: bold;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: large;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
.item2 {
background-color: rgb(112, 29, 189);
width: 80px;
height: 90px;
color: #fff;
font-weight: bold;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: small;
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
.item3 {
background-color: rgba(112, 29, 189, 0);
width: 80px;
height: 110px;
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
.box1 {
background-color: burlywood;
height: 150px;
width: 900px;
display: flex;
justify-content: flex-start;
}
HTML-CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox</title>
<link rel="stylesheet" href="../CSS/style.css">
</head>
<body>
<header>
<div class="layout2">
<nav>
<div class="container">
<ul>
<li>
<a class="item1" href="#">LOGO</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
</body>
</html>
DAnkeschön LG
1 Antwort
Die graue Box ist kein direktes Kindelement einer Flexbox. Sie steckt im nav-Element, welches sich zudem in der Höhe nur so weit ausbreitet, wie nötig. In deinem Fall entspricht das der Höhe der grauen Box.
.layout2 (Flexbox)
nav
.container
Zuerst müsstest du also dafür sorgen, dass das nav-Element eine größere Höhe einnimmt, als die graue Box.
Beispiel:
.layout2 > nav {
height: 100vh;
}
Dann kannst du die graue Box hinunterdrücken, indem du das nav-Element zur Flexbox machst und align-items verwendest.
display: flex;
align-items: flex-end;
Ich versuche es später falls es nicht klappt dann schreibe dir