CSS flex-flow Eigenschaft
Die CSS-Eigenschaft flex-flow ist eine Kurzschreibweise für flex-wrap und flex-direction. Lesen Sie mehr und probieren Sie Beispiele aus.
Die CSS-Eigenschaft flex-flow ist eine Kurzschreibweise, die zwei Flex-Container-Eigenschaften auf einmal setzt: flex-direction (die Achse, entlang der Elemente angeordnet werden) und flex-wrap (ob Elemente in einer Zeile bleiben oder auf mehrere umbrechen). Anstatt beide Deklarationen einzeln zu schreiben, kombiniert man sie in einer einzigen Zeile, was das CSS kürzer und die Absicht klarer macht.
Diese Eigenschaft gehört zu den CSS3-Eigenschaften und ist Teil des Flexible Box Layout-Moduls. Sie wirkt sich nur auf ein Element aus, dessen display auf flex oder inline-flex gesetzt ist; bei einem Nicht-Flex-Element hat sie keine Auswirkung, und wenn ein Flex-Container keine flexiblen Elemente enthält, gibt es nichts zum Anordnen.
Diese Seite behandelt die Syntax von flex-flow, was jeder Wert bewirkt, und ausführbare Beispiele für alle gängigen Kombinationen aus Richtung und Umbruch.
Was jeder Wert steuert
flex-flow akzeptiert einen flex-direction-Wert und einen flex-wrap-Wert, in beliebiger Reihenfolge:
flex-direction— die Hauptachse und die Reihenfolge, in der Elemente ihr folgen:row(Standard) — von links nach rechts.row-reverse— von rechts nach links.column— von oben nach unten.column-reverse— von unten nach oben.
flex-wrap— was passiert, wenn Elemente nicht in eine Zeile passen:nowrap(Standard) — alle Elemente werden in eine einzige Zeile gequetscht und können schrumpfen.wrap— Elemente umbrechen auf neue Zeilen in derselben Richtung.wrap-reverse— Elemente umbrechen auf neue Zeilen in der entgegengesetzten Querachsen-Richtung.
Da der Anfangswert row nowrap ist, ordnet ein Flex-Container ohne gesetztes flex-flow seine Elemente in einer einzelnen horizontalen Zeile an.
Moderne Browser unterstützen die Eigenschaft flex-flow nativ ohne Vendor-Präfixe.
| Anfangswert | row nowrap |
|---|---|
| Gilt für | Flex-Container |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.flexFlow = "column nowrap"; |
Syntax
Syntax der CSS-Eigenschaft flex-flow
flex-flow: <flex-direction> || <flex-wrap>;
/* or */ initial | inherit;Wenn wir flex-flow: row wrap; setzen, definiert der erste Wert die flex-direction und der zweite die Eigenschaft flex-wrap. Die beiden Werte sind reihenfolgeunabhängig, da sie verschiedene Schlüsselwörter akzeptieren, sodass flex-flow: wrap row; gleichermaßen gültig ist. Man kann auch nur einen der beiden Werte angeben — zum Beispiel lässt flex-flow: column; flex-wrap bei seinem Standardwert nowrap.
Beispiel der CSS-Eigenschaft flex-flow
flex-flow: row wrap;Der folgende Code ist identisch mit dem obigen Code.
Beispiel der Eigenschaften flex-direction und flex-wrap
flex-direction: row;
flex-wrap: wrap;Beispiel der flex-flow-Eigenschaft mit den Werten "row" und "wrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Beispiel der flex-flow-Eigenschaft mit den Werten "wrap-reverse" und "column":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: column wrap-reverse;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Beispiel der flex-flow-Eigenschaft mit den Werten "row" und "nowrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Ergebnis
Mit flex-flow: row nowrap bleiben alle sechs Elemente in einer einzelnen horizontalen Zeile und schrumpfen, um in den Container zu passen, anstatt umzubrechen:
Beispiel der flex-flow-Eigenschaft mit den Werten "row-reverse" und "nowrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row-reverse nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Beispiel der flex-flow-Eigenschaft mit den Werten "column" und "nowrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: column nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Beispiel der flex-flow-Eigenschaft mit den Werten "column-reverse" und "nowrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: column-reverse nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| flex-direction | Definiert die Richtung der flexiblen Elemente. Mögliche Werte sind: row row-reverse column column-reverse initial inherit | Ausprobieren » |
| flex-wrap | Definiert, ob flexible Elemente umbrechen sollen oder nicht. Mögliche Werte sind: nowrap wrap wrap-reverse initial inherit | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Wann flex-flow verwendet werden sollte
Greifen Sie auf flex-flow zurück, wenn Sie sowohl die Richtung als auch das Umbruchverhalten eines Flex-Containers festlegen möchten. Ein häufiges Muster ist eine responsive Leiste von Elementen, die auf breiten Bildschirmen in einer Zeile stehen, auf schmalen Bildschirmen aber auf mehrere Zeilen umbrechen sollen — flex-flow: row wrap; erledigt das mit einer einzigen Deklaration. Wenn Sie nur eine der beiden Teil-Eigenschaften ändern, kann die Verwendung der Langformen flex-direction oder flex-wrap die Absicht klarer machen. Einen vollständigen Überblick, wie diese zusammenpassen, finden Sie im ultimativen Leitfaden zu Flexbox.