CSS-Eigenschaft flex-flow
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.
Die CSS-Kurzform-Eigenschaft flex-flow legt die Richtung eines Flex-Containers sowie sein Umbruchverhalten fest.
Probieren Sie es aus
flex-flow: row wrap;
flex-flow: row-reverse nowrap;
flex-flow: row wrap balance;
flex-flow: column wrap-reverse;
flex-flow: column wrap;
flex-flow: column balance wrap;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div>Item One</div>
<div>Item Two</div>
<div>Item Three</div>
<div>Item Four</div>
<div>Item Five</div>
<div>Item Six</div>
<div>Item Seven</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
width: 80%;
max-height: 300px;
display: flex;
}
#example-element > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
width: 60px;
margin: 5px 10px;
}
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;
/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
flex-flow: wrap balance;
flex-flow: balance wrap-reverse;
/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
flex-flow: row-reverse balance wrap
/* Global values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;
Werte
Diese Eigenschaft wird als durch Leerzeichen getrennte Liste von Schlüsselwörtern der folgenden Typen angegeben:
flex-direction-
Ein Schlüsselwort, das die Hauptachse und Richtung festlegt, in der Flex-Elemente im Flex-Container platziert werden.
flex-wrap-
Ein oder zwei Schlüsselwörter, die festlegen, ob Flex-Elemente in mehrere Zeilen umbrochen werden können, und, falls Umbruch erlaubt ist, die Richtung bestimmen, in der die Zeilen gestapelt werden, sowie, ob sie ausgeglichen werden.
Beschreibung
Die Kurzform-Eigenschaft flex-flow legt die Eigenschaften flex-direction und flex-wrap fest und definiert damit die Richtung eines Flex-Containers und sein Umbruchverhalten. Sie kann außerdem festlegen, dass Flex-Elemente ausgeglichen werden, wenn ein Umbruch erlaubt ist.
Beispielsweise legt column-reverse wrap die Hauptachse auf die Blockrichtung mit umgekehrtem Hauptanfang und Hauptende fest, wobei Flex-Elemente umbrochen werden dürfen und bei Bedarf neue Zeilen erstellt werden.
.container {
flex-flow: column-reverse wrap;
}
Um die Flex-Elemente gleichmäßig über jede Flex-Zeile zu verteilen, können Sie zusätzlich zu wrap das Schlüsselwort balance für flex-wrap einschließen:
.container {
flex-flow: column-reverse wrap balance;
}
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | flexible Container |
| Vererbt | Nein |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
flex-flow =
<'flex-direction'> ||
<'flex-wrap'>
<flex-direction> =
row |
row-reverse |
column |
column-reverse
<flex-wrap> =
nowrap |
[ wrap | wrap-reverse ] || balance
Beispiele
Grundlegende Verwendung
Dieses Beispiel demonstriert die Verwendung der Kurzform flex-flow für einen Flex-Container, sodass die Elemente in umgekehrter Reihenfolge über mehrere Zeilen angeordnet werden.
HTML
Wir fügen eine Liste von Wörtern in alphabetischer Reihenfolge ein:
<ul>
<li>Alphabet</li>
<li>Banana</li>
<li>Crayons</li>
<li>Dinosaurs</li>
<li>Eggplant</li>
<li>Foundation</li>
<li>Ghosts</li>
<li>Happy</li>
<li>Igloo</li>
<li>Janitors</li>
<li>Kittens</li>
<li>Lasso</li>
<li>Magic 8-ball</li>
<li>Nincompoop</li>
<li>Orange</li>
<li>Petunia</li>
<li>Quality</li>
<li>Rancid</li>
<li>Shoelace</li>
<li>Terydactyl</li>
<li>Umbrella</li>
<li>Valentine</li>
<li>Westward</li>
<li>Xylophone</li>
</ul>
CSS
Wir legen <ul> mit der Eigenschaft display als Flex-Container fest, definieren eine width, fügen ein gap hinzu, damit zwischen Flex-Elementen und Flex-Zeilen etwas Platz ist, und setzen dann flex-flow, um die Elemente in umgekehrter Reihenfolge umzubrechen. Zusätzliche CSS-Regeln wurden der Kürze halber ausgeblendet.
ul {
display: flex;
width: 31em;
gap: 1em;
flex-flow: row-reverse wrap-reverse;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-flow-property |