flex-flow CSS-Eigenschaft
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 flex-flow CSS Kurzform-Eigenschaft spezifiziert die Richtung eines Flex-Containers sowie dessen Umbruchverhalten.
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;
}
Bestandteile der Eigenschaften
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
Sehen Sie flex-direction und flex-wrap für Details zu den Werten.
Beschreibung
Die flex-flow Kurzform-Eigenschaft spezifiziert die flex-direction und flex-wrap Eigenschaften, die die Richtung eines Flex-Containers und dessen Umbruchverhalten definieren. Sie kann auch festlegen, dass Flex-Elemente ausgeglichen werden, wenn das Umbrechen erlaubt ist.
Zum Beispiel wird column-reverse wrap die Hauptachse in die Block-Richtung mit einem umgekehrten Hauptanfang und Hauptende setzen, wobei Flex-Elemente erlaubt werden, umzubrechen und bei Bedarf neue Zeilen zu erstellen.
.container {
flex-flow: column-reverse wrap;
}
Um die Flex-Elemente gleichmäßig über jede Flex-Linie zu verteilen, können Sie das flex-wrap Schlüsselwort balance zusätzlich zu wrap einbeziehen:
.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 Nutzung
Dieses Beispiel zeigt die Verwendung der flex-flow Kurzform auf einem Flex-Container, sodass die Elemente rückwärts über mehrere Zeilen verteilt 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 setzen das <ul> als Flex-Container mit der display Eigenschaft, definieren eine width, fügen einen gap hinzu, sodass etwas Platz zwischen den Flex-Elementen und Flex-Linien ist, und setzen dann flex-flow, um die Elemente in umgekehrter Reihenfolge umzubrechen. Zusätzliche CSS wurde zur Kürze verborgen.
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 |