Ευέλικτη κατεύθυνση - CSS-Κόλπα

Anonim

Η flex-directionιδιότητα είναι δευτερεύουσα ιδιοκτησία της μονάδας Flexible Box Layout.

Καθιερώνει τον κύριο άξονα, ορίζοντας έτσι την κατεύθυνση των ευέλικτων αντικειμένων που τοποθετούνται στον κάδο ευέλικτης.

Υπενθύμιση: ο κύριος άξονας ενός εύκαμπτου εμπορευματοκιβωτίου είναι ο πρωτεύων άξονας κατά μήκος του οποίου τοποθετούνται τα ευέλικτα αντικείμενα. Προσοχή, δεν είναι απαραίτητα οριζόντιο. εξαρτάται από την flex-directionιδιοκτησία.

Η flex-directionιδιοκτησία δέχεται 4 διαφορετικές τιμές:

  • row( προεπιλογή ): ίδιο με την κατεύθυνση κειμένου
  • row-reverse: απέναντι από την κατεύθυνση κειμένου
  • column: ίδιο με rowαλλά από πάνω προς τα κάτω
  • column-reverse: ίδιο με row-reverseπάνω προς τα κάτω

Σημειώστε ότι rowκαι row-reverseεπηρεάζονται από την κατεύθυνση του εύκαμπτου δοχείου. Εάν η κατεύθυνση του κειμένου είναι ltr, rowαντιπροσωπεύει τον οριζόντιο άξονα προσανατολισμένο από αριστερά προς τα δεξιά και row-reverseαπό δεξιά προς τα αριστερά. αν η κατεύθυνση είναι rtl, είναι το αντίθετο.

Σύνταξη

flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )

Διαδήλωση

Στην ακόλουθη επίδειξη:

  • Η κόκκινη λίστα έχει οριστεί σε row
  • Η κίτρινη λίστα έχει οριστεί σε row-reverse
  • Η μπλε λίστα έχει οριστεί σε column
  • Η πράσινη λίστα έχει οριστεί σε column-reverse

Σημείωση: Η κατεύθυνση του κειμένου δεν έχει επεξεργαστεί.

Δείτε αυτό το στυλό!

Έτσι, βασικά, θα χρησιμοποιείτε rowστις περισσότερες περιπτώσεις, ή columnυπό ορισμένες περιστάσεις. Διαφορετικά, είναι πολύ ασυνήθιστο να αντιστρέψετε τη σειρά κατεύθυνσης.

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

  • (σύγχρονο) σημαίνει την πρόσφατη σύνταξη από την προδιαγραφή (π.χ. display: flex;)
  • (υβριδικό) σημαίνει μια περίεργη ανεπίσημη σύνταξη από το 2011 (π.χ. display: flexbox;)
  • (παλιά) σημαίνει την παλιά σύνταξη από το 2009 (π.χ. display: box;)
Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ ΙΕ Android iOS
21+ (μοντέρνα)
20- (παλιά)		 3.1+ (παλιά) 2-21 (παλιά)
22+ (νέα)		 12.1+ (μοντέρνο) 10+ (υβριδικό) 2.1+ (παλιά) 3.2+ (παλιά)

Το πρόγραμμα περιήγησης Blackberry 10+ υποστηρίζει τη νέα σύνταξη.

Για περισσότερες πληροφορίες σχετικά με το πώς να συνδυάσετε σύνταξη προκειμένου να λάβετε την καλύτερη υποστήριξη προγράμματος περιήγησης, ανατρέξτε σε αυτό το άρθρο (CSS-Tricks) ή σε αυτό το άρθρο (DevOpera).