Ευθυγράμμιση - CSS-Κόλπα

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

Επιτρέπει την παράκαμψη της align-itemsτιμής για συγκεκριμένα στοιχεία flex.

Η align-selfιδιότητα δέχεται τις ίδιες 5 τιμές με align-items:

• flex-start: το άκρο περιθωρίου εκκίνησης του αντικειμένου τοποθετείται στη γραμμή διασταύρωσης
• flex-end: το άκρο περιθωρίου άκρου του αντικειμένου τοποθετείται στη γραμμή διασταύρωσης
• center: το αντικείμενο είναι κεντραρισμένο στον εγκάρσιο άξονα
• baseline: τα στοιχεία είναι ευθυγραμμισμένα, όπως η γραμμή βάσης τους είναι ευθυγραμμισμένη
• stretch (προεπιλογή): τέντωμα για να γεμίσει το δοχείο (εξακολουθεί να ισχύει το ελάχιστο πλάτος / το μέγιστο πλάτος)

Σύνταξη

align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )

Διαδήλωση

Η παρακάτω επίδειξη δείχνει πώς ένα στοιχείο μπορεί να ευθυγραμμιστεί στο κοντέινερ flex ανάλογα με την align-selfτιμή:

• Το 1ο στοιχείο έχει οριστεί σε flex-start
• Το 2ο στοιχείο έχει οριστεί σε flex-end
• Το 3ο στοιχείο έχει οριστεί σε center
• Το 4ο στοιχείο έχει οριστεί σε baseline
• Το 5ο στοιχείο έχει οριστεί σε stretch

Δείτε την επίδειξη ευθυγράμμισης πένας από CSS-Tricks (@ css-tricks) στο CodePen.

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

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.

Επιφάνεια εργασίας

Χρώμιο	Firefox	ΙΕ	Ακρη	Σαφάρι
21 *	28	11	12	6.1 *

Κινητό / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	4.4	7.0-7.1 *

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