CSS flex-direction ιδιότητα

Ορισμός και χρήση

Η ιδιότητα flex-direction καθορίζει την κατεύθυνση των διαδραστικών στοιχείων.

Σημείωση:Εάν το στοιχείο δεν είναι ένα διαδραστικό στοιχείο, η ιδιότητα flex είναι άχρηστη.

Δείτε επίσης:

Εκμάθηση CSS:CSS Ελαστική Κουτί

Εγχειρίδιο CSS:Ιδιότητα flex

Εγχειρίδιο CSS:Ιδιότητα flex-basis

Εγχειρίδιο CSS:Ιδιότητα flex-flow

Εγχειρίδιο CSS:Ιδιότητα flex-grow

Εγχειρίδιο CSS:Ιδιότητα flex-shrink

Εγχειρίδιο CSS:Ιδιότητα flex-wrap

Εγχειρίδιο HTML DOM:Ιδιότητα flexDirection

Παράδειγμα

Ρυθμίστε την κατεύθυνση των ελαστικών στοιχείων εντός του στοιχείου <div> αντίθετη;

div {
  display: flex;
  flex-direction: row-reverse; 
}

Δοκιμάστε το شخصικά

Γλώσσα γράφημα CSS

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Τιμή ιδιότητας

Τιμή Περιγραφή
row Προεπιλεγμένη τιμή. Ως γραμμή, εμφανίζεται οριζόντια τα ελαστικά στοιχεία.
row-reverse Ισοδύναμοι ρόλοι, αλλά αντίθετη κατεύθυνση.
column Ως στήλη, εμφανίζεται οριζόντια τα ελαστικά στοιχεία.
column-reverse Ισοδύναμοι στήλες, αλλά αντίθετη κατεύθυνση.
initial Ρυθμίστε αυτή την ιδιότητα στη προεπιλεγμένη τιμή. Δείτε: initial。
inherit Κληρονομίζει αυτή την ιδιότητα από το γονικό στοιχείο. Δείτε: inherit。

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: row
Κληρονομικότητα: Όχι
Παράδειγμα animation: Δεν υποστηρίζεται. Δείτε:Αντικειμενικές ιδιότητες animation。
Έκδοση: CSS3
Γλώσσα γράφημα JavaScript: object.style.flexDirection="column-reverse"

Περισσότερες παραδείγματα

Χρησιμοποιώντας flex-direction και queries για μέσο όρο για την δημιουργία διαφορετικών διατάξεων για διαφορετικά μεγέθη οθόνης/εστιών;

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Προσαρμοστική διάταξη - Δημιουργία μονοπολικής διάταξης (100%) αντί για διπολική διάταξη (50%) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Δοκιμάστε το شخصικά

Υποστήριξη του προγράμματος περιήγησης

Τα αριθμήματα στη τάβληση σηματοδοτούν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.

Τα αριθμήματα στη τάβληση δείχνουν την πρώτη έκδοση του πυρήνα που χρησιμοποιείται με πρόθεμα.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0