Der ultimative Leitfaden zu Flexbox
Einstieg in CSS Flexbox: Dieser Leitfaden behandelt alle wichtigen Bereiche von Flexbox mit Beispielen und praktischen Tipps.
Überblick
Das Flexbox-Layout, offiziell bekannt als CSS Flexible Box Layout Module, ist ein Layout-Modell in CSS.
Flexbox ist ein eindimensionales Layout, was bedeutet, dass es Elemente nur in einer Dimension gleichzeitig anordnet – entweder als Zeile oder als Spalte, aber nicht beides zusammen. Dies steht im Gegensatz zum zweidimensionalen Modell – CSS Grid Layout, das Elemente in zwei Dimensionen gleichzeitig anordnet (Zeilen und Spalten gemeinsam).
Flexbox wurde als Alternative zu CSS Floats eingeführt, um die allgemeine Darstellung einer Webseite zu gestalten. Flexbox bietet viele Vorteile; insbesondere lassen sich damit Ausrichtung, Richtung, Reihenfolge und Größe von Elementen steuern.
Die Elemente innerhalb eines Flex-Containers:
- können in beliebiger Richtung angeordnet werden (nach links, rechts, unten oder sogar nach oben) (flex-direction).
- können direkte (links nach rechts) oder umgekehrte (rechts nach links) Reihenfolge haben.
- können eine „flexible" Breite und Höhe haben, um den verfügbaren Raum auszufüllen (flex-item).
- können dynamisch entlang der Hauptachse ein- oder ausgeblendet werden und dabei die Größe der sekundären Querachse beibehalten.
- können linear entlang der Hauptachse angeordnet oder in mehrere Zeilen entlang oder quer zur Querachse umgebrochen werden.
Flexbox ist vergleichsweise neu, erfreut sich heute jedoch einer hervorragenden Browser-Unterstützung.
(Mehr erfahren über Browser-Unterstützung und Kompatibilität).
Flexbox-Grundlagen
Beim Arbeiten mit Flexbox muss man in zwei Achsen denken – der Hauptachse und der Querachse – und zwischen Flex-Containern und Flex-Elementen unterscheiden.
Haupt- und Querachse
Flexbox ist ein achsenorientiertes Layout; es hat eine Hauptachse und eine Querachse. Das bedeutet, dass Elemente entweder entlang der Hauptachse oder der Querachse angeordnet werden. Die Querachse verläuft immer senkrecht zur Hauptachse.
Die Hauptachse wird durch die flex-direction-Eigenschaft definiert, die folgende Werte hat:
- row
- row-reverse
- column
- column-reverse
Wenn die flex-direction-Eigenschaft mit den Werten row oder row-reverse angegeben wird, verläuft die Hauptachse horizontal, d. h. entlang der Zeile in der Inline-Richtung. Die Querachse verläuft dann entlang der Spalten.
Wenn die flex-direction-Eigenschaft mit den Werten column oder column-reverse angegeben wird, verläuft die Hauptachse vertikal, d. h. von oben nach unten in der Block-Richtung. Die Querachse verläuft dann entlang der Zeilen.
Werfen Sie einen Blick auf diese Abbildung, um das Konzept der Flexbox-Achse besser zu verstehen.
- main axis – Die Hauptachse eines Flex-Containers ist die Achse, entlang derer Flex-Elemente platziert werden.
- main-start | main-end – Die Flex-Elemente werden im Container ab main-start platziert und verlaufen bis main-end.
- main size – Die Breite oder Höhe eines Flex-Elements in der Hauptdimension ist die Hauptgröße des Elements.
- cross axis – Die Achse senkrecht zur Hauptachse, deren Richtung von der Richtung der Hauptachse abhängt (horizontal oder vertikal).
- cross-start | cross-end – Flex-Zeilen werden mit Elementen gefüllt und ab der cross-start-Seite des Flex-Containers bis zur cross-end-Seite in den Container eingefügt.
- cross size – Die Breite oder Höhe eines Flex-Elements in der Querdimension ist die Quergröße des Elements.
Quelle: W3.org
Flex-Container und Elemente
Ein Flex-Container ist ein übergeordnetes Element, das eine Reihe von untergeordneten Elementen – den Flex-Elementen – gruppiert. In den meisten Fällen definiert der Container das Layout und die Position seiner Flex-Elemente, aber Flex-Elemente können auch individuell bearbeitet werden.
Um ein HTML-Element in einen Flex-Container umzuwandeln, sollte die display-Eigenschaft mit dem Wert flex (Block-Level-Flex-Container-Box) oder inline-flex (definiert eine Inline-Level-Flex-Container-Box) verwendet werden. Andernfalls ignoriert der Browser alle verwendeten Flexbox-Eigenschaften.
Flexbox-Container
.container {
display: flex; /* or inline-flex*/
}Flex-Container-Eigenschaften
Die flex-direction-Eigenschaft
Die flex-direction-Eigenschaft wird verwendet, um Zeilen- und Spaltenlayouts zu erstellen. Sie legt die Richtung der Hauptachse des Flex-Containers fest und bestimmt die Reihenfolge, in der Elemente erscheinen.
Die flex-direction-Eigenschaft hat folgende Werte:
- row – Elemente werden entlang der Zeile von links nach rechts angezeigt.
- row-reverse – Elemente werden von rechts nach links angezeigt.
- column – Elemente werden vertikal von oben nach unten angezeigt.
- column-reverse – Elemente werden vertikal von unten nach oben angezeigt.
Beispiel der flex-direction-Eigenschaft:
Beispiel der flex-direction-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3 {
color: #8ebf42;
}
.flex-container {
display: flex;
flex-direction: row-reverse;
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 80px;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #1faadb;
}
</style>
</head>
<body>
<h3>row-reverse</h3>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>In unserem Beispiel sind die Elemente in umgekehrter Reihenfolge angeordnet. Ändern Sie die Werte der flex-direction-Eigenschaft (row, column, column-reverse), um zu sehen, wie sich das Erscheinungsbild der Elemente verändert.
Hinweis: row und row-reverse sind vom Schreibmodus abhängig; im rtl-Kontext (rechts nach links) werden sie entsprechend umgekehrt.
Die flex-wrap-Eigenschaft
Standardmäßig passen alle Flex-Elemente in eine Zeile. Wenn Flex-Elemente zu breit für den Container sind, überlaufen sie ihn. Um dies zu verhindern, sollte die flex-wrap-Eigenschaft verwendet werden, um die Elemente umzubrechen.
Die Eigenschaft kann folgende Werte annehmen:
- nowrap (Standard) – Flex-Elemente werden in einer Zeile angezeigt; standardmäßig passen sie in die Breite des Flex-Containers.
- wrap – Flex-Elemente werden bei Bedarf in mehreren Zeilen von links nach rechts und von oben nach unten angezeigt.
- wrap-reverse – Flex-Elemente werden bei Bedarf in mehreren Zeilen von links nach rechts und von unten nach oben angezeigt.
Hinweis: Die Eigenschaft ist vom Schreibmodus abhängig; im rtl-Kontext (rechts nach links) wird sie entsprechend umgekehrt.
Die justify-content-Eigenschaft
Die justify-content-Eigenschaft wird verwendet, um die horizontale Ausrichtung von Elementen entlang der Hauptachse zu definieren. Sie hilft dabei, den freien Raum zwischen den Flex-Elementen auf der Hauptachse zu verteilen.
Die Werte für justify-content sind folgende:
- flex-start (Standardwert) – Elemente werden am Anfang des Containers angeordnet.
- flex-end – Elemente werden am Ende des Containers angeordnet.
- center – Elemente werden in der Mitte des Containers angeordnet.
- space-between – Elemente werden gleichmäßig (mit Abstand dazwischen) in der Zeile verteilt; das erste Element befindet sich an der Startlinie, das letzte an der Endlinie.
- space-around – Elemente werden mit Abstand vor, zwischen und nach ihnen angezeigt.
- space-evenly – Elemente werden so verteilt, dass der Abstand zwischen je zwei Elementen (und der Abstand zu den Rändern) gleich ist.
Beispiel der justify-content-Eigenschaft:
justify-content-Eigenschaft, Beispiele
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
padding: 10px;
margin-bottom: 20px;
background-color: #1faadb;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
.flex-container > div {
width: 28%;
height: 45px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container > div.item-two {
width: 18%;
}
</style>
</head>
<body>
<p>flex-start</p>
<div class="flex-container flex-start">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>flex-end</p>
<div class="flex-container flex-end">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>center</p>
<div class="flex-container center">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>space-between</p>
<div class="flex-container space-between">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>space-around</p>
<div class="flex-container space-around">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
</body>
</html>Ändern Sie den Wert der justify-content-Eigenschaft, um zu sehen, wie die Elemente ausgerichtet werden.
Die align-items-Eigenschaft
Die align-items-Eigenschaft wird verwendet, um Elemente entlang der Querachse auszurichten. Sie ist das Gegenstück zur justify-content-Eigenschaft, die Elemente entlang der Hauptachse ausrichtet.
Die Werte für align-items sind folgende:
- stretch (Standard) – Elemente werden gestreckt, um den Container zu füllen.
- flex-start – Elemente werden am cross-start des Containers gestapelt.
- flex-end – Elemente werden am cross-end des Containers gestapelt.
- center – Elemente werden in der Mitte der Querachse gestapelt.
- baseline – Elemente werden so ausgerichtet, dass ihre Baselines übereinstimmen.
Hinweis: Wenn die Höhe des Flex-Containers begrenzt ist, kann der Wert stretch dazu führen, dass der Inhalt des Flex-Elements aus dem Element herausragt.
Beispiel der align-items-Eigenschaft:
align-items-Eigenschaft, Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: center; /* Use another value to see the result */
height: 250px;
padding: 15px;
background-color: #1faadb;
}
.flex-container > div {
width: 15%;
height: 100%;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container .one {
height: 60%;
}
.flex-container .three {
height: 40%;
}
.flex-container .four {
height: 70%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</body>
</html>In unserem Beispiel haben wir den Wert center verwendet, um die Elemente auf der Querachse zu zentrieren. Probieren Sie andere Werte aus und sehen Sie sich das Ergebnis an.
Die align-content-Eigenschaft
Die align-content-Eigenschaft wird verwendet, um die Zeilen eines Flex-Containers innerhalb des Containers auszurichten, wenn auf der Querachse zusätzlicher Platz vorhanden ist – ähnlich wie justify-content einzelne Elemente innerhalb der Hauptachse ausrichtet.
Hinweis: Die align-Eigenschaft hat keine Wirkung, wenn im Flex-Container nur eine Zeile vorhanden ist.
Die Werte für align-content und ihre Bedeutung sind folgende:
- stretch (Standard) – Zeilen werden gedehnt, um den verfügbaren Platz einzunehmen.
- flex-start – Zeilen werden zum Anfang des Containers gruppiert.
- flex-end – Zeilen werden zum Ende des Containers gruppiert.
- center – Zeilen werden zur Mitte des Containers gruppiert.
- space-between – Zeilen werden gleichmäßig verteilt; die erste Zeile befindet sich am Anfang des Containers, die letzte am Ende.
- space-around – Zeilen werden gleichmäßig mit gleichem Abstand um jede Zeile verteilt.
Beispiel der align-content-Eigenschaft:
align-content-Eigenschaft, Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-end/* Use another value to see the result */;
min-height: 250px;
padding: 10px;
background-color: #1faadb;
}
.flex-container>div {
width: 45%;
height: 45px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container .one,
.flex-container .nine {
width: 23%;
}
.flex-container .two,
.flex-container .six {
width: 9%;
}
.flex-container .three {
width: 25%;
}
.flex-container .four {
width: 35%;
}
.flex-container .five,
.flex-container .eleven {
width: 32%;
}
.flex-container .seven,
.flex-container .ten {
width: 6%;
}
</style>
</head>
<body>
<p>flex-end</p>
<div class="flex-container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
<div class="seven"></div>
<div class="eight"></div>
<div class="nine"></div>
<div class="ten"></div>
<div class="eleven"></div>
</div>
</body>
</html>Die gap-Eigenschaft
Die gap-Eigenschaft definiert den Abstand zwischen Flex-Elementen (die Abstände), ohne Platz an den äußeren Rändern des Containers hinzuzufügen. Sie ist eine sauberere Alternative zum Setzen von margin auf einzelnen Elementen, da sie nie einen unerwünschten Abstand vor dem ersten oder nach dem letzten Element erzeugt. Sie können einen einzelnen Wert für gleiche Zeilen- und Spaltenabstände angeben oder zwei Werte (row-gap column-gap).
gap-Eigenschaft, Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px 20px; /* row-gap column-gap */
padding: 10px;
border: 1px dashed #666;
}
.flex-container > div {
width: 80px;
height: 70px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Die flex-flow-Eigenschaft
Dies ist eine Kurzschreibweise für die Eigenschaften flex-direction und flex-wrap, die zusammen die Haupt- und Querachse des Flex-Containers definieren. Der Standardwert ist row nowrap.
Hinweis: Die flex-flow-Richtungen sind vom Schreibmodus abhängig; im rtl-Kontext (rechts nach links) wird der Inhalt entsprechend umgekehrt.
Beispiel der flex-flow-Eigenschaft:
flex-flow-Eigenschaft, Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-flow: row-reverse wrap; /* Use another value to see the result */
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 30%;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
text-align: center;
font-size: 28px;
font-weight: 700;
line-height: 70px;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>Sie können einen anderen Wert wählen, um zu sehen, wie sich die Position der Elemente ändert.
Flex-Element-Eigenschaften
Die order-Eigenschaft
Standardmäßig werden Elemente in der Reihenfolge angeordnet, in der sie im Quellcode erscheinen (beginnend mit der niedrigsten Ordnungsgruppe aufsteigend). Um die Reihenfolge der Elemente im Flex-Container zu ändern, wird die order-Eigenschaft verwendet.
Die order-Eigenschaft legt die Reihenfolge von Flex-Elementen fest, indem sie diesen Ordnungsgruppen zugewiesen werden. Sie nimmt einen einzelnen ganzzahligen Wert an, der die Ordnungsgruppe definiert, zu der das Flex-Element gehört. Der Standardwert ist 0.
Beispiel der order-Eigenschaft:
order-Eigenschaft in Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 30%;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
text-align: center;
font-size: 28px;
font-weight: 700;
line-height: 70px;
color: #fff;
}
.item-one {
order: 1;
}
.item-four {
order: -1;
}
.item-five {
order: 0;
}
.item-three {
order: 2;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item-one">1</div>
<div class="item-two">2</div>
<div class="item-three">3</div>
<div class="item-four">4</div>
<div class="item-five">5</div>
</div>
</body>
</html>Die align-self-Eigenschaft
Die Eigenschaft wird verwendet, um Elemente individuell innerhalb des Flex-Containers auszurichten. Flex-Elemente werden auf der Querachse der Flex-Container-Zeile ausgerichtet (ähnlich wie justify-content, aber in senkrechter Richtung). Wenn die align-self-Eigenschaft gesetzt wird, überschreibt sie die durch align-items festgelegte Ausrichtung.
Hinweis: Wenn der Querachsen-Abstand eines Elements auf auto gesetzt ist, wird align-self ignoriert.
Die align-self-Eigenschaft hat dieselben Werte wie align-items. Sie sind der Übersicht halber unten aufgeführt.
- stretch (Standard) – Elemente werden gestreckt, um den Container zu füllen.
- flex-start – Elemente werden am cross-start des Containers gestapelt.
- flex-end – Elemente werden am cross-end des Containers gestapelt.
- center – Elemente werden in der Mitte der Querachse gestapelt.
- baseline – Elemente werden so ausgerichtet, dass ihre Baselines übereinstimmen.
Beispiel der align-self-Eigenschaft:
align-self-Eigenschaft, Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
height: 300px;
padding: 10px;
border: 1px dashed #666;
}
.flex-container > div {
width: 15%;
height: 80%;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
div.item-two {
width: 20%;
}
div.item-three {
align-self: flex-end;
height: 80px;
margin: 0 10%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item-one"></div>
<div class="item-two"></div>
<div class="item-three"></div>
<div class="item-four"></div>
</div>
</body>
</html>Die flex-grow-Eigenschaft
Die flex-grow-Eigenschaft definiert die Fähigkeit eines Elements, bei Bedarf zu wachsen. Sie legt den Flex-Wachstumsfaktor fest (relativ zu den übrigen Elementen im Container), der angibt, wie viel Platz das Element im Container beim Verteilen von positivem Raum einnehmen soll.
Die Eigenschaft nimmt einen einheitenlosen Wert an, der als Proportion dient.
Hinweis: Der Wert darf keine negative Zahl sein.
Wenn alle Elemente im Container denselben flex-grow-Wert haben (z. B. 1), haben alle Elemente die gleiche Größe im Container.
Wenn die Größe eines der Flex-Elemente unterschiedlich ist (z. B. 2), nimmt dieses Element doppelt so viel Platz ein wie die anderen Elemente (deren Größe auf 1 gesetzt ist).
Beispiel der flex-grow-Eigenschaft:
flex-grow-Eigenschaft, Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
margin-bottom: 20px;
}
.flex-container div {
flex-grow: 0.2;
padding: 30px 5px;
margin-right: -2px;
border: 2px solid #8ebf42;
}
.flex-container div.two {
flex-grow: 5;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div><span>5</span>
</div>
</div>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div class="two">
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div>
<span>5</span>
</div>
</div>
</body>
</html>Wir empfehlen, die flex-Kurzschreibweise anstelle von flex-grow zu verwenden, um die Flexibilität zu steuern, da sie alle nicht angegebenen Komponenten korrekt zurücksetzt, um gängige Anwendungsfälle zu unterstützen.
Die flex-shrink-Eigenschaft
Die flex-shrink-Eigenschaft ermöglicht es einem Flex-Element, sich zu verkleinern. Sie gibt an, wie viel Platz das Element im Container einnehmen soll, wenn negativer Raum verteilt wird.
Die Eigenschaft nimmt einen einheitenlosen Wert an.
Hinweis: Der Wert darf keine negative Zahl sein.
Standardmäßig können alle Flex-Elemente verkleinert werden. Wenn wir jedoch den Wert auf 0 setzen (nicht verkleinern), behalten sie ihre ursprüngliche Größe bei.
Beispiel der flex-shrink-Eigenschaft:
flex-shrink-Eigenschaft, Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
}
.flex-container div {
width: 120px;
padding: 30px 10px;
margin-right: -2px;
border: 2px solid #8ebf42;
}
.flex-container div.two {
flex-shrink: 0;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div class="two">
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div>
<span>5</span>
</div>
<div>
<span>6</span>
</div>
</div>
</body>
</html>Wir empfehlen, die flex-Kurzschreibweise anstelle von flex-shrink zu verwenden, um die Flexibilität zu steuern, da sie alle nicht angegebenen Komponenten korrekt zurücksetzt, um gängige Anwendungsfälle zu unterstützen.
Die flex-basis-Eigenschaft
Die flex-basis-Eigenschaft legt die Anfangsgröße eines Flex-Elements fest, bevor der verbleibende Raum entsprechend den Flex-Faktoren verteilt wird. Die Eigenschaft wird durch das Schlüsselwort content oder eine Breite angegeben.
Die Werte von flex-basis sind folgende:
- auto (Standard) – die Länge entspricht der Länge des flexiblen Elements.
- width – eine absolute Länge oder ein Prozentsatz der Hauptgröße des übergeordneten Flex-Containers oder das Schlüsselwort auto. Negative Werte sind ungültig.
- content – bestimmt die automatische Größenanpassung basierend auf dem Inhalt des Flex-Elements.
- initial – setzt diese Eigenschaft auf ihren Standardwert zurück.
Hinweis: Die content-Eigenschaft wird noch nicht gut unterstützt, sodass es schwer zu verstehen ist, was ihre Verwandten max-content, min-content und fit-content tun.
Beispiel der flex-basis-Eigenschaft:
flex-basis-Eigenschaft, Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
background-color: #8ebf42;
}
.flex-container div {
padding: 30px 10px;
margin-right: -2px;
border: 2px solid #8ebf42;
background-color: #fff;
}
.flex-container div.four {
flex-basis: 25%;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div class="four">
<span>4</span>
</div>
<div>
<span>5</span>
</div>
</div>
</body>
</html>Die flex-Eigenschaft
Die flex-Eigenschaft ist die Kurzschreibweise für flex-grow, flex-shrink und flex-basis zusammen. flex-shrink und flex-basis sind optional.
Neben anderen Werten kann diese Eigenschaft auch auto (1 1 auto) oder none (0 0 auto) annehmen.
Wir empfehlen dringend, die Kurzschreibweise flex anstelle der einzelnen Eigenschaften zu verwenden.
Beispiel der flex-Eigenschaft:
flex anstelle von flex-shrink, Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
height: 150px;
padding: 10px;
margin-bottom: 20px;
border: 1px dashed #666;
}
.flex-container > div {
width: 15%;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.second > div {
flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
<div class="flex-container second">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Hinweis: Die CSS-Eigenschaften float, clear und vertical-align haben keine Wirkung auf Flex-Elemente.
Flexbox-Beispiele
Werfen wir einen Blick auf einige CSS-Flexbox-Beispiele und sehen, welche Art von Layouts Sie für Ihre eigenen Webprojekte verwenden können.
Elemente vertikal und horizontal zentrieren
Das Zentrieren von Elementen mit allen verfügbaren Mitteln in CSS war schon immer eine Herausforderung. Mit dem Aufkommen von Flexbox lässt sich dieses Problem einfach lösen. Mit den Eigenschaften align-items, align-self und justify-content können Sie Elemente sowohl vertikal als auch horizontal ausrichten.
Beispiel der align-items-, align-self- und justify-content-Eigenschaften zum vertikalen und horizontalen Zentrieren von Elementen:
Elemente vertikal und horizontal zentrieren mit Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 1px dashed #666;
}
.flex-container > div {
width: 70px;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #1faadb;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Responsive Navigationsleiste mit Suche
Mit Flexbox können Sie eine Navigationsleiste erstellen, bei der die Menüpunkte links und die Suchleiste rechts ausgerichtet sind (oder umgekehrt). Die Navigationsleiste ist responsiv und erweitert oder verkleinert sich je nach Bildschirmgröße.
Beispiel der responsiven Navigationsleiste:
Navigationsleiste mit Flexbox, Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.main-nav {
display: flex;
padding: 15px;
border-radius: 5px;
background: #1c87c9;
color: #fff;
font-weight: 500;
}
.main-nav > ul {
display: flex;
flex: 2;
padding: 0;
margin: 0;
list-style-type: none;
}
.main-nav li {
margin-right: 20px;
}
.main-nav > form {
display: flex;
justify-content: flex-end;
flex: 1;
}
.main-nav input {
flex: 1;
padding: 5px;
}
.main-nav button {
padding: 0 20px;
margin-left: 10px;
border: 0;
border-radius: 20px;
background: #fff;
color: #666;
}
@media screen and (max-width: 575px) {
.main-nav {
flex-direction: column;
}
.main-nav ul {
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>Contact us</li>
</ul>
<form>
<input type="search" placeholder="Search" />
<button type="button">Go</button>
</form>
</nav>
</body>
</html>Das Holy Grail Layout
Das Holy Grail Layout-Muster ist im Web sehr verbreitet. Es umfasst eine Kopfzeile, eine Fußzeile, den Hauptinhaltsbereich mit einer Navigation fester Breite links, Inhalt in der Mitte und einer Seitenleiste fester Breite rechts.
Beispiel des Holy Grail Layouts:
Holy Grail Layout mit Flexbox, Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
box-sizing: border-box;
font-size: 18px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.main {
display: flex;
flex: 1;
}
.main > article {
flex: 1;
}
.main > nav,
.main > aside {
flex: 0 0 20vw;
background: #d5dce8;
}
.main > nav {
order: -1;
}
header,
footer {
background: #1c87c9;
height: 15vh;
}
header,
footer,
article,
nav,
aside {
padding: 20px;
}
</style>
</head>
<body>
<header>Header</header>
<div class="main">
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
</html>