DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die flex-direction-Eigenschaft ist eine Untereigenschaft des Flexible Box Layout-Moduls. Sie legt die Hauptachse fest und definiert somit die Richtung, in der Flex-Elemente im Flex-Container platziert werden.
.element {
flex-direction: column-reverse;
}Zur Erinnerung: Die Hauptachse eines Flex-Containers ist die primäre Achse, entlang derer die Flex-Elemente angeordnet werden. Vorsicht, sie ist nicht unbedingt horizontal; sie hängt von der flex-direction-Eigenschaft ab.
Die flex-direction-Eigenschaft akzeptiert vier mögliche Werte
row: wie die Textrichtung (Standard)row-reverse: entgegengesetzt zur Textrichtungcolumn: wierow, aber von oben nach untencolumn-reverse: wierow-reverse, von oben nach unten
Beachten Sie, dass row und row-reverse von der Ausrichtung des Flex-Containers beeinflusst werden. Wenn seine Textrichtung ltr ist, repräsentiert row die horizontale Achse von links nach rechts und row-reverse von rechts nach links; ist die Richtung rtl, ist es umgekehrt.
Syntax
flex-direction: row | row-reverse | column | column-reverseDemo
In der folgenden Demo
- Rote Liste ist auf
rowgesetzt - Gelbe Liste ist auf
row-reversegesetzt - Blaue Liste ist auf
columngesetzt - Grüne Liste ist auf
column-reversegesetzt
Hinweis: Die Textrichtung wurde nicht bearbeitet.
Also im Grunde werden Sie row in den meisten Fällen verwenden, oder column unter bestimmten Umständen. Ansonsten ist es ziemlich ungewöhnlich, die Reihenfolge der Richtung umzukehren.
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
- flex-direction in der Spezifikation
- flex-direction bei MDN
- Erweitertes Browser-übergreifendes Flexbox
- Ein Leitfaden zu Flexbox
- Verwendung von Flexbox
- Altes Flexbox und neues Flexbox
Verwandte Beiträge
Balancing on a Pivot with Flexbox
Boxen, die die Höhe füllen (oder mehr) (und nicht zerdrücken)
Zentrieren in CSS: Vollständige Anleitung
Entwerfen eines Produktseiten-Layouts mit Flexbox
Gleiche Spalten mit Flexbox: Es ist komplizierter, als Sie denken
grid-auto-flow : CSS Grid :: flex-direction : Flexbox
Wie man eine responsive Kartenkomponente ohne Media Query erstellt
Der Denkprozess hinter einem Flexbox-Layout
Verwandt
align-content
.element { align-content: space-around; }
align-items
.element { align-items: flex-start; }
flex
.element { flex: 1 1 100px; }
flex-flow
.element { flex-flow: row wrap; }
flex-wrap
.example { flex-wrap: wrap; }
justify-content
.element { justify-content: center; }
justify-items
.element { justify-items: center; }
order
place-content
place-items
.element { place-items: center; }
Hallo, ich bin kürzlich beim flexiblen Boxmodell hängen geblieben, weil ich nicht herausfinden konnte, wie
flex-direction: columnin Safari vor Version 6.1 funktioniert.-webkit-flex-direction: columnwird nicht unterstützt, und auch nicht der Kurzschreibungsbefehl-webkit-flex-flow: column wrap.Ich habe hier herausgefunden, dass wir, um die
column-Richtung mit der altenbox-*-Syntax in Webkit-Browsern zu erreichen, Folgendes verwenden müssen:-webkit-box-orient: vertical.Ich hatte Schwierigkeiten, diese Informationen zu finden, also dachte ich, ich hinterlasse einen Kommentar, um allen zu helfen, die eine echte browserübergreifende Flex-Unterstützung erreichen wollen. Ist jemandem das schon passiert?
Danke Colin! Du hast mir viel Zeit gespart.
Wirklich, wirklich danke Colin :D
Ich bin mit genau demselben Problem auf diesen Artikel gestoßen und habe die Lösung in deinem Kommentar gefunden. Danke!
Du bist großartig Colin, das hat genau das Problem gelöst, das ich hatte.
Wow Colin, Lebensretter! So viel Liebe!
Danke, Colin! Ich habe den ganzen Tag versucht herauszufinden, was Safari für ein Problem hatte, als ich deinen Kommentar gefunden habe.
Hallo
Vielleicht entdecke ich das spät, Colins Erkenntnisse waren genau das Richtige für den alten Safari (3 und ich glaube bis 5.1.7 oder so).
Vielen Dank
Colin, ich glaube, ich liebe dich!!!! Du hast mich gerettet :)))))
Verdammt, danke Colin! Hat bei mir auch in Chrome funktioniert.
Entschuldigung, nein, hat doch nicht in Chrome funktioniert.
Das hat wirklich geholfen. Vielen Dank! Als Webentwickler müssen wir Flex öfter nutzen.
Quellen auf CodePen sind hier
Ich versuche, Flexbox zu verwenden, um den Footer am unteren Rand des Viewports zu fixieren, wenn die Seite kleiner ist als der Viewport. Und mit Colins Ratschlag funktioniert auch nichts. Ich habe die Body-Stile gesetzt auf
Körper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-direction: column;
-webkit-box-orient: vertical;
display: flex;
flex-direction: column;
min-height: 100vh;
}
und den Hauptcontainer auf
.cont {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
Safari hat mich überrascht.
Weiß jemand, wie man das behebt?
Ich poste normalerweise nicht in programmbezogenen Blogs (nur auf StackOverflow), aber Colin verdient meine Zeit: Danke, Kumpel!
Danke Colin, deine Lösung hat teilweise funktioniert. Ich habe mich auch auf diese beiden Posts bezogen
http://elikirkriser.com/flexbox-css-cross-browser-issues/
http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
Ayyy Colin war zur Stelle
Ich wollte nur sagen, danke! Du hast mich aus einer Sackgasse geholfen. Ich habe versucht, Spalten auf einer Vorlage zu reparieren, die Flexbox verwendete, und stattdessen habe ich Bootstrap-Befehle verwendet. Es hat mich ein paar Stunden gekostet, das herauszufinden. Danke für den schnellen Tipp! <3
Hallo Leute, ich bin auch auf dasselbe Problem gestoßen. Nachdem ich so viele Dinge ausprobiert hatte, bin ich auf eine Lösung gestoßen, die für mich funktioniert hat.
Wenn Sie die Eigenschaft 'flex-basis' verwenden, beeinträchtigt dies 'flex-direction'.
Wenn Sie 'flex-basis' vermeiden können, wird es funktionieren.
Gott sei Dank! Ich kann nicht glauben, dass es bereits 2018 ist und ich dieses Problem mit einer aktualisierten Version von Google Chrome habe. Vielen Dank, Collin. Das hat mir den Tag gerettet!