Όταν προσθέτετε ύψος σε ένα στοιχείο πολλών στηλών, μπορείτε να ελέγξετε τον τρόπο με τον οποίο το περιεχόμενο γεμίζει τις στήλες. Το περιεχόμενο μπορεί να ισορροπηθεί ή να συμπληρωθεί διαδοχικά.
ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )Αυτή η ιδιότητα είναι διαθέσιμη μόνο στον Firefox. Ο Firefox εξισορροπεί αυτόματα το περιεχόμενο σε διάταξη πολλαπλών στηλών με περιορισμό ύψους. Τα άλλα προγράμματα περιήγησης θα γεμίζουν πάντα τις στήλες διαδοχικά όταν τους δίνεται περιορισμός ύψους.
Για να κάνετε τον Firefox να συμπεριφέρεται όπως τα άλλα προγράμματα περιήγησης, δηλαδή να γεμίσετε στήλες διαδοχικά, μπορείτε να ορίσετε column-fill: auto.
Αξίες
column-fillαποδέχεται τις τιμές λέξεων-κλειδιών balanceκαι auto.
balanceθα γεμίσει κάθε στήλη με περίπου την ίδια ποσότητα περιεχομένου, αλλά δεν θα επιτρέψει στις στήλες να αυξηθούν ψηλότερα από το height. Ίσως διαπιστώσετε ότι οι στήλες θα εμφανιστούν μικρότερες από ότι heightκαθώς το πρόγραμμα περιήγησης κατανέμει το περιεχόμενο ομοιόμορφα οριζόντια.
autoθα γεμίσει κάθε στήλη μέχρι να φτάσει heightκαι να το κάνει μέχρι να εξαντληθεί το περιεχόμενο. Δεδομένου του περιεχομένου, αυτή η τιμή δεν θα γεμίσει απαραίτητα όλες τις στήλες ούτε θα τις γεμίσει ομοιόμορφα.
Είναι σαν να ρίχνουμε χυμό σε ποτήρια. Μπορείτε να ρίξετε ίση ποσότητα χυμού σε κάθε ποτήρι και να διαπιστώσετε ότι δεν γεμίζετε κάθε ποτήρι στην κορυφή ( balance). Εναλλακτικά, μπορείτε να γεμίσετε ένα ποτήρι στην κορυφή μέχρι να γεμίσει και να το επαναλάβετε μέχρι να μην μείνει χυμός. Ως αποτέλεσμα, τα υπόλοιπα ποτήρια μπορεί να έχουν λιγότερο ή καθόλου χυμό ( auto).
Δείτε το παράδειγμα γεμίσματος στήλης Pen (CSS-Tricks) από CSS-Tricks (@ css-tricks) στο CodePen.
Υποστήριξη προγράμματος περιήγησης
Οι column-fillτιμές λέξεων-κλειδιών λειτουργούν ειδικά στον Firefox. Δεν λειτούργησαν τον Αύγουστο του 2014 όταν γράφτηκε αρχικά αυτή η καταχώρηση στο Almanac, αλλά όταν δοκιμάστηκε ξανά τον Αύγουστο του 2015 (Chrome 44). Κατά τη διάρκεια αυτής της δοκιμής, φαίνεται ότι δεν θα χρειαζόταν δυναμική αλλαγή της τιμής, έπρεπε να αναγκάσετε μια αναμετάδοση.
Υποστήριξη προγράμματος περιήγησης για διάταξη πολλών στηλών γενικά:
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| Οποιος | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Μην ξεχάσετε τα προθέματά σας!
