Hallo liebe Leute,
ich bin dabei mich in FlexBox einzuarbeiten und habe mal ein Seitengerüst erstellt, wie ich es vielleicht haben möchte. Das ist einfach mal eine Übung für mich, um das alles zu verstehen. Ich möchte nächstes Schuljahr eine EINFÜHRUNGS-Kurs WebDesign an unserer Schule geben (bin Lehrer) und will dann auch für mich ein bisl Sicherheit haben (sind ja noch 4 Monate hin).
Folgendes wollte ich erreichen:
Im Header Logo, Titel (und mobile Hamburger Button) nebeneinander, darunter die Navigation im Header (Daher der Wrapper im Header).
Dann ein main-content mit 2 asides (weiß noch nicht genau wie ich die anordne je nach tablet, handy oder pc, muss erst überlegen was ich genau damit mache, wahrscheinlich einmal weiterführende links und einmal ???).
Und schließlich der Footer als Sticky-footer (Daher der Innenbody im Body).
Jetzt musste ich ziemlich viel wrappen (body und nav) und springe zwischen flex-direction column und row ziemlich hin und her. Daher zwei (nein drei) Fragen:
1. Macht das Sinn das alles über FlexBoxen zu lösen?
2. Kann man das mit FlexBoxen eleganter lösen (guter Stil)?
3. Gibt es generell Sachen, die so nicht sinnvoll sind, wie ich es jetzt versucht habe?
Hier erst mal das Stylesheet:
body {
display: flex;
min-height: 100vh;
flex-direction: column; /* im body sollen header, content und footer untereinander stehen*/
margin: 0 auto; /*zum zentrieren des Inhaltes auf Bildschirmmitte*/
max-width: 80em; /* damit der Inhalt auf gr. Displays nicht zu sehr in die Breite gezogen wird*/
}
.innenbody {
display: flex;
flex-flow: row wrap; /*im content sollen die Elemente nebeneinander angeordnet sein */
flex: 1; /*alle Elemente auf gleiche Größe initialisieren*/
}
header {
display: flex;
flex-direction: column; /* damit ich das Nav auf gr. Displays unter dem Titel usw. habe */
justify-content: space-between;
}
.headerwrapper { /* für LogoBild, Titel und auf kleinen Displays den hamburgerBtn. Der Button soll ganz rechts sein (rechtshänderbedienung), das Logo links. Der Wrapper, damit das Nav hinterher unter (column) den in row angeordneten 3 Elementen steht */
display: flex;
flex-direction: row;
border: 9px solid blue; /*nur zum visuellen debuggen*/
justify-content: space-between;
}
header, footer, main, aside {
border-radius: 0 0.5em 0.5em;
border: 1px solid;
padding: 0.75em;
margin: 0.75em;
flex 1 100%;
/* Die 4 Elemente sind Kinder der FlexBox body und werden untereinander angeordnet. So sind sie alle gleich groß (Faktor 1) und nehmen die volle verfügbare Höhe (100%). Damit haben wir den Footer immer ganz unten. */
}
header img {
flex: 0 0 150px; /*Feste Breite des Bildes, daher in Pixel. */
}
.label-toggle {
color: #000;
font-size: 3em;
margin-right: .5em; /* damit er nicht am Rand klebt */
}
nav {
display: flex;
flex-flow: column wrap; /* mobileFirst, wird auf gr. Displays zu row*/
}
footer {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
==============================================
Und die noch leere Seite:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Beispiel Seite mit FlexBox</title>
<link href="mystyle.css" rel="stylesheet"/>
</head>
<body>
<input type="checkbox" id="menu-toggle" onclick="">
<header>
<div class="headerwrapper">
<img id="imgFrog" src= "./bilder/LogoFrog.gif" alt "imgFrog">
<h1>Biologie-Seite von Marco Oglialoro</h1>
<label for="menu-toggle" class="label-toggle">☰</label>
</div>
<nav>
Navi
</nav>
</header>
<div class="innenbody">
<main>
Main-Content
</main>
<aside id="aside_nav">
Aside-Content
</aside>
<aside>
Aside-Content
</aside>
</div>
<footer>
footer Inhalt
</footer>
</body>
</html>
=============================================================
Danke für Eure Kommentare