Mit Flexbox einen Text verschieben / sticken?
Guten Tag,
Ich würde gerne den Text c Lukas Kahler an die untere linke Seite mit Flexbox verschieben.
Im Internet stand das ich mal align-items: flex-end; Probieren soll dies hat jedoch nicht mit Erfolg geklappt, da ich noch neu in der Webentwicklung bin, wollte ich fragen wie ihr diese Aufgabe lösen würdet?
Viele Grüße
HTML Code
<!DOCTYPE html>
<head>
<html lang="en">
<meta charset="UTF-8">
<!-- Verknüpfung der CSS-Datei -->
<link rel="stylesheet" type="text/css" href="style.css"> <title>Lukas Kahler</title>
</head>
<body>
<h1>Guten Morgen</h1>
<p>©Lukas Kahler</p>
</body>
</html>
CSS Code
body {
background-color: rgb(239, 199, 88);
}
.c-box {
align-items: flex-end;
text-align: center;
}
Könntest du den bisherige HTML und CSS code dazu ergänzen?
Ja gerne einen Moment, vielen dank das du mir zur Seite stehst :)
1 Antwort
Die Flexbox muss einem Container zugeordnet werden, welcher die volle Seitenhöhe einnimmt. Für die Flexboxitems kannst du dann festlegen, inwiefern sie sich innerhalb der Flexbox ausbreiten dürfen.
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<!-- meta data ... -->
</head>
<body>
<main class="container">
<header class="header">
<!-- ... -->
</header>
<footer class="footer">
<!-- ... -->
</footer>
</main>
</body>
</html>
Die Seite wird hier klar in Header und Footer aufgeteilt. Wenn du keinen Header benötigst, kannst du stattdessen section-Elemente verwenden.
Beachte, dass du bei dir den html- und head-Knoten vertauscht hast. Außerdem sollte der Wert des lang-Attributs de sein, da deine Seite deutschen Inhalt bereitstellt.
CSS:
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
flex: 1 0 auto;
}
.footer p {
margin-bottom: 0
}