Das CSS Flexible Box Layout zeigt neben CSS Grid eine der beiden wesentlichen Möglichkeiten zur Gestaltung von Layouts mit CSS auf.
Im Gegensatz zu älteren Techniken wie Floats wird Flexbox für die Erzeugung von responsiven Layouts bereitgestellt. Es stehen mit flexiblen Layouts sehr eine Vielzahl an Möglichkeiten der Gestaltung zur Verfügung.
Wie funktioniert CSS Flexbox?
Flexbox arbeitet mit einem Container-Element und den darin enthaltenen Child Elementen in der ersten Ebene (Flex-Items). Der Flexboxcontainer wirkt auf eine Ebene. Weitere Ebenen abwärts werden nicht unterstützt.
Bei den Container Elementen kann es sich um <div> Elemente oder auch um Listen handeln. Hier ein Beispiel mit Listenelementen, in der realen Darstellung ist es nicht in Graustufen gehalten..
Eigenschaften der Flex-Box
Elemente können mittels der Eigenschaften justify-content, align-items auf den Achsen (vertikal und horizontal) positioniert werden. Die Ausrichtung auf der horizontalen kann mit flex-direction angepasst werden.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Flexible Darstellung</title>
<style>
ul {
font-family: sans-serif;
display: flex;
justify-content: space-around;
margin: 5rem;
border: 1px solid #BBBBBB;
background-color: #595873;
padding: 0px;
width: 35rem;
list-style-type: none;
}
li {
box-sizing: border-box;
margin: 0px;
border-right: 0px solid #FFFFFF;
text-align: center;
}
li:last-of-type {
border-right: none;
}
a {
display: block;
padding: 1rem;
background-color: #567482;
color: #FFFFFF;
text-decoration: none;
}
a:hover, a:focus {
background-color: #CCCCCC;
color: #000000;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#" title="Anfang">Anfang</a></li>
<li><a href="#" title="Beiträge">Beiträge</a></li>
<li><a href="#" title="Kontaktformular">Kontaktformular</a></li>
<li><a href="#" title="Impressum">Impressum</a></li>
</ul>
</nav>
</body>
</html>Die Eigenschaft display:flex erzeugt die Flexbox generell.
Die weiteren Eingenschaften lauten:
flex-direction: row(links nach rechts = Standardwert)flex-direction: column(oben nach unten)flex-direction: row-reverse(rechts nach links)flex-direction: column-reverse(unten nach oben)
Flex Elemente
Neben der Positionierung über den Flex-Container können auch die Items innerhalb des Containers angepasst werden. Entweder mit Hilfe der klassischen CSS-Angaben für Größe und mittels eines Box Models. In der CSS Flexbox dienen die Eigenschaften flex-basis, flex-grow und flex-shrink zur Beeinflussung der Größe. Mit den verschiedenen flex-Werten kann das gewollte Layout innerhalb des Flex Containers erzeugt werden.
