Flexbox¶
Flexbox
Mit Flexbox kann man unkompliziert variable und responsive Layouts erzeugen. Das Modell arbeitet mit zwei Achsen auf denen Inhalte verteilt werden können. Daher bietet sich Flexbox besonders für lineare Strukturen mit einzeiligen oder einspaltigen Layouts an.
Flexbox ist flexibel, leicht verständlich und bietet viele Vorteile, wie etwa die einfache Ausrichtung von Elementen, die dynamische Größenanpassung und die Möglichkeit, Layouts unabhängig von der Bildschirmgröße zu erstellen.
Ohne Flexbox¶
<body>
<div class="flex-container">
<div class="item"> 1</div>
<div class="item"> 2</div>
<div class="item"> 3</div>
<div class="item"> 4</div>
<div class="item"> 5</div>
</div>
</body>
<style>
*{box-sizing: border-box;
height: 200px;
}
.item{
background-color: lightgreen;
height: 50px;
width: 50px;
margin: 2px;
text-align: center;
font-family: sans-serif;
padding: 4px;
}
.flex-container{
}
</style>
Mit Flexbox¶
Einzeilige Layouts¶
Standard für die Layout-Richtung ist die Anordnung der Elemente in einer Zeile: flex-direction: row;
Einspaltige Layouts¶
Die Elemente der Flexbox werden nun in einer Spalte angeordnet:
Wahrscheinlich erscheinen die Quadrate als Rechtecke, da die Flexbox standardmässig zu wenig Platz in der Höhe freimacht.
column-reverse
Reverse
Beachten Sie, dass sowohl bei row als auch column bei reverse die Elemente am rechten bzw. unteren Rand der Flexbox angeordnet werden.
Haupt- und Kreuzachsen
Flexbox kann immer nur auf eine Achse angewandt werden (=Hauptachse). Die andere Achse (=Kreuzachse) verbleibt ursprünglich.
Position der Elemente auf der Kreuzachse¶
Es ist natürlich wünschenswert die Positionierung der Elemente auf der Kreuzachse steuern zu können.
Hier kommt die justify-content-Eigenschaft mit den Attributen flex-start, center und flex-end zum Einsatz:
| flex-start | center | flex-end |
|---|---|---|
 |
 |
 |
Wenn wir weiter in Richtung Seitenlayout denken, möchten wir die Elemente der Kreuzachse auf den gesamten zur Verfügung stehenden Platz aufteilen können.
| space-between | space-around |
|---|---|
| Das 1. Flex-Item ist am ganz Anfang der Achse, das letzte ganz am Ende. Alle anderen Items werden gleichmäßig verteilt. Es entstehen also Abstände zwischen den Items. | Die Flex-Items werden wie bei space-between verteilt, allerdings entsteht auch vor dem 1. Item und nach dem letzten Item ein Abstand |
 |
 |
Reihenfolge der Elemente festlegen¶
Dazu erweitern wir die HTML-Klassen-Tags, damit wir für die Elemente sowohl einen globalen , als auch einen spezifischen Selektor zur Verfügung haben:
<body>
<div class="flex-container">
<div class="flex-item flex-item-1"> 1</div>
<div class="flex-item flex-item-2"> 2</div>
<div class="flex-item flex-item-3"> 3</div>
</div>
</body>
Mit
wird das 1. Element ganz nach hinten geschoben, da die beiden anderen Elemente standardmässig mit order:2 versehen sind:
Die Elemente werden also hierarchisch angeordnet und können durchaus in derselben Hierarchiestufe sein. Wir vergeben jedem Element eine eigene Hierarchiestufe:
Flexbox als Seitenlayout¶
Vorteile Flexbox
Sie werden schon festgestellt haben, dass flexbox gegenüber float viel mehr Möglichkeiten bietet, ein Seitenlayout aufzubauen.
Mit der Anordnung der Elemente auf Haupt- und Kreuzachse und der Möglichkeit den verfügbaren Platz auszunutzen und auf die Reihenfolge der Elemente einzuwirken, haben Sie ein (wie der Name bereits sagt) flexibles und umfangreiches Layouting-Tool zur Verfügung.
Aufgabe¶
<body>
<header>
<h1>Header <br> <span>FLEXBOX</span></h1>
</header>
<section>
<div class="spalte spalte1">
<h2>Spalte 1</h2>
</div>
<div class="spalte spalte2">
<h2>Spalte 2</h2>
</div>
<div class="spalte spalte3">
<h2>Spalte 3</h2>
</div>
</section>
<footer>
<h1>Footer</h1>
</footer>
</body>
| Ausgangslage | Resultat |
|---|---|
 |
 |
 |
Mit flexbox umsetzen |
Lösung¶
In HTML müssen wir nichts mehr ergänzen, wir haben für flexbox ausreichend Selektoren zum Ansprechen der Elemente in <section> zur Verfügung:
<body>
<header>
<h1>Header <br> <span>FLEXBOX</span></h1>
</header>
<section>
<div class="spalte spalte1">
<h2>Spalte 1</h2>
</div>
<div class="spalte spalte2">
<h2>Spalte 2</h2>
</div>
<div class="spalte spalte3">
<h2>Spalte 3</h2>
</div>
</section>
<footer>
<h1>Footer</h1>
</footer>
</body>
<style>
*{box-sizing: border-box;
}
body{
font-family: sans-serif;
}
header, footer{
background-color: #F6D860;
text-align: center;
}
header{
padding: 15px;
}
footer{
padding: 5px;
}
section {
display:flex;
flex-direction: row;
}
.spalte{
padding: 10px;
height: 300px; /* nur für Demozwecke, sonst entfernen */
min-width: 33.33%;
}
.spalte1{
background-color: #95CD41;
}
.spalte2{
background-color: #FF7F3f;
order:3;
}
.spalte3{
background-color: #2cace3;
order:2;
}
span{
font-size: 0.8em;
color: #FF7F3f;
font-weight: bold;
}
</style>
RD
Testen was passiert, wenn Sie Ihr Browserfenster verkleinern oder in der Entwicklerkonsole verschiedene Geräte anwählen.
Flexbox passt sich schon sehr gut an, bietet darüber hinaus noch weitere Funktionen, um Responsive Design umzusetzen:
Mit flex-grow wird der Hauptinhalt immer auf den verfügbaren Platz wachsen.
flex-basis kann Elemente mit einer fixen, unveränderlichen Grösse belegen
flex-shrink grenzt ein, wie stark ein Element sich verkleinern darf
Mit der Steuerung über Media Queries können so gute RD-Layouts erzeugt werden.
Beispiel Responsive Design¶
Breakpoint bei 768px:
<body>
<div class="container">
<header>Header</header>
<nav>Navigation</nav>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>
</body>
.container {
display: flex;
flex-direction: column;
min-height: 100vh; /* Vollbild-Layout */
}
header, footer {
background: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav, aside {
background: #f4f4f4;
padding: 20px;
}
main {
flex-grow: 1;
padding: 20px;
}
@media (min-width: 768px) {
.container {
flex-direction: row;
flex-wrap: wrap;
}
header, footer {
flex-basis: 100%;
}
nav, aside {
flex-basis: 200px;
}
main {
flex-grow: 2;
flex-basis: calc(100% - 400px); /* Hauptinhalt füllt den verbleibenden Platz */
}
}