DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft flex-flow ist eine Untereigenschaft des Flexible Box Layout Moduls. Sie ist eine Kurzschreibweise für flex-direction und flex-wrap.
.element {
flex-flow: row wrap;
}Syntax
flex-flow: <‘flex-direction’> || <‘flex-wrap>;Sie können einen oder zwei Werte angeben, unabhängig von der Reihenfolge.
Demo
Beide Listen verhalten sich exakt gleich
- Die blaue hat
flex-direction: rowundflex-wrap: wrap - Die rote hat
flex-flow: row wrap
Browser-Unterstützung
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10 1 11 | Alle | 20-48 2 49+ 3 | 21-28 4 29+ | 7-8 4 9+ | 12.1+ |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| 7-8.4 4 9+ | 92+ | 90+ | 92+ | 12.1+ |
- 1 Unterstützt mit Präfix
-ms - 2 Teilweise Unterstützung
- 3 Unterstützt mit Präfix
-moz- - 4 Unterstützt mit Präfix
-webkit-
Für weitere Informationen, wie man Syntaxen mischt, um die beste Browserunterstützung zu erhalten, siehe „Using Flexbox“ und diesen Artikel von DevOpera.
Weitere Informationen
- CSS Flexible Box Layout Module Level 1
- MDN-Dokumentation
- Erweitertes Browser-übergreifendes Flexbox
- Ein Leitfaden zu Flexbox
- Verwendung von Flexbox
- Altes Flexbox und neues Flexbox
Hallo Chris,
Nur eine Anmerkung, dass flex-flow: row wrap; (Kurz- oder Langform) derzeit nur in Chrome und Opera unterstützt wird. Die anderen Browser "wickeln" Zeilen noch nicht.
Hier ist Ihr Codepen in Firefox 22, Chrome 27 und Safari 6.
Mehr Informationen unter
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow
Abgesehen von einigen IE-Bugs (für die es Workarounds gibt) ist die Unterstützung heutzutage ziemlich gut.
http://caniuse.com/#feat=flexbox
<
script>
Hallo
<
script>
Aus Versehen, bitte ignorieren
<
script>
alert(“Hello”);
<
script>
Aus Versehen, bitte ignorieren
Gibt es eine Möglichkeit, den Flex-Container zu zentrieren? Ich versuche hier ein paar Tricks und der Flex-Container ist immer linksbündig ausgerichtet.
margin: 0 auto;
Und einige andere Methoden: https://css-tricks.de/centering-css-complete-guide/