Η πλήρης κατανόηση του Flexbox και του CSS Grid είναι απαραίτητη εάν θέλετε να δημιουργήσετε εκπληκτικούς ιστότοπους με απόκριση.
Εάν γράφετε CSS για μεγάλο χρονικό διάστημα, οι πιθανότητες είναι καλές να έχετε τουλάχιστον ακούσει για αυτούς τους όρους. Μπορεί ακόμη και να έχετε χρησιμοποιήσει ένα ή και τα δύο σε κάποιο βαθμό. Είναι και τα δύο ισχυρά μέρη του CSS, με παρόμοιες αλλά διακριτικά διαφορετικές περιπτώσεις χρήσης.
Τι είναι το Flexbox;
Το Flexbox είναι μια μονοδιάστατη μέθοδος διάταξης CSS που κυκλοφορεί εδώ και καιρό. Μπορείτε να σκεφτείτε το Flexbox ως μια δέσμη σχετικών ιδιοτήτων CSS που μπορείτε να χρησιμοποιήσετε για να ευθυγραμμίσετε στοιχεία HTML σε ένα κοντέινερ και να διαχειριστείτε το διάστημα μεταξύ τους.
Πριν από το Flexbox, αυτός ο τύπος διάταξης απαιτούσε απογοητευτική και δυσκίνητη χρήση του πλωτήρα και ιδιότητες θέσης.
Αν ανησυχείτε για την υποστήριξη του προγράμματος περιήγησης για το Flexbox, μην ανησυχείτε. Σύμφωνα με caniuse.com, όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν το Flexbox.
Τα βασικά του Flexbox
Ενώ Το Flexbox περιλαμβάνει πολλές ιδιότητες CSS, τα βασικά είναι αρκετά απλά. Η χρήση του Flexbox ξεκινά πάντα με τη δήλωση ενός γονικού κοντέινερ ως flex-container προσθέτοντας οθόνη: ευέλικτη στους κανόνες του στυλ του. Κάνοντας αυτό αυτόματα όλα τα παιδιά αυτού του στοιχείου γίνονται ευέλικτα αντικείμενα.
Μετά από αυτό, μπορείτε να ελέγξετε την κατανομή του χώρου μέσα στο flex-container χρησιμοποιώντας το ιδιότητα δικαιολογώ-περιεχομένου. Μπορείτε να ελέγξετε την ευθυγράμμιση των flex-αντικειμένων με το στοίχιση-στοιχεία ιδιοκτησία.
Ακολουθεί ένα παράδειγμα κώδικα που χρησιμοποιεί το Flexbox για να απλώσει ομοιόμορφα το χώρο σε ένα κοντέινερ μεταξύ των παιδιών του και να τα ευθυγραμμίσει όλα στο κέντρο του κοντέινερ. Αυτό είναι το HTML:
<div class="δοχείο">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Αυτό είναι το CSS:
.δοχείο {
οθόνη: flex;
πλάτος: 100%;
justify-content: space-round;
στοίχιση-στοιχεία: κέντρο;
περίγραμμα: 1px συμπαγές μαύρο.
ύψος: 200 px;
}
.δοχείο > div {
ύψος: 100 px;
πλάτος: 100 px;
Χρώμα φόντου: κόκκινο;
άσπρο χρώμα;
μέγεθος γραμματοσειράς: 5rem;
text-align: κέντρο;
περίγραμμα-ακτίνα: 5px;
}
Και εδώ είναι η έξοδος:
Τι είναι το CSS Grid;
Το CSS Grid είναι ένα σύστημα διάταξης που είναι συμπληρωματικό του Flexbox. Το Flexbox είναι ισχυρό, αλλά όχι πολύ κατάλληλο για συγκεκριμένους τύπους διατάξεων. Η προσπάθεια να διαμορφώσετε τη δομή μιας ολόκληρης σελίδας με το Flexbox θα καταλήξει να είναι μια απογοητευτική εργασία που περιλαμβάνει άσχημη, μη σημασιολογική σήμανση και χάκι CSS.
Το CSS Grid δεν είναι μια αντικατάσταση του Flexbox, αλλά μάλλον ένα εναλλακτικό σύστημα για ορισμένες περιπτώσεις.
Η υποστήριξη για το CSS Grid δεν είναι τόσο εκτεταμένη όσο για το Flexbox, αλλά το Grid είναι εύλογα καλά υποστηριζόμενο το 2022.
Τα βασικά του CSS Grid
Η έννοια του Grid είναι απλή. Όπως υποδηλώνει το όνομα, το CSS Grid σάς επιτρέπει να διαιρέσετε το χώρο σε ένα γονικό κοντέινερ σε ένα πλέγμα γραμμών και στηλών, με οποιονδήποτε αριθμό γραμμών/στηλών θέλετε. Μετά από αυτό, καθορίζετε τη θέση των θυγατρικών στοιχείων αναφέροντας τις γραμμές του πλέγματος του γονέα.
Ξεκινήστε προσθέτοντας οθόνη: πλέγμα στο μητρικό κοντέινερ. Στη συνέχεια χρησιμοποιήστε το πλέγμα-πρότυπο-γραμμές και πλέγμα-πρότυπο-στήλες ιδιότητες για να καθορίσετε τις σειρές και τις στήλες στις οποίες θέλετε να χωρίσετε το πλέγμα. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε το πλέγμα-στήλη και πλέγμα-σειρά ιδιότητες στα θυγατρικά στοιχεία για να τους πει σε ποιο σημείο του πλέγματος πρέπει να βρίσκονται. Ας δούμε ένα παράδειγμα Grid που χρησιμοποιεί τη ρύθμιση πέντε στοιχείων από πριν, αλλά σε μια πιο περίπλοκη διάταξη.
Εδώ είναι το HTML:
<div class="δοχείο">
<div>1</div>
<div class="δύο">2</div>
<div class="τρία">3</div>
<div class="τέσσερα">4</div>
<div class="πέντε">5</div>
</div>Εδώ είναι το CSS:
.δοχείο {
οθόνη: πλέγμα;
πλάτος: 100%;
πλέγμα-πρότυπο-γραμμές: επανάληψη (3, 1fr);
πλέγμα-πρότυπο-στήλες: επανάληψη (3, 1fr);
χάσμα: 0.5 εκμ;
περίγραμμα: 1px συμπαγές μαύρο.
ύψος: 300 px;
}.δοχείο > div {
Χρώμα φόντου: κόκκινο;
άσπρο χρώμα;
μέγεθος γραμματοσειράς: 5rem;
text-align: κέντρο;
περίγραμμα-ακτίνα: 5px;
}
.δοχείο > .δύο {
πλέγμα-σειρά: 2;
πλέγμα-στήλη: 2;
}
Εδώ είναι η έξοδος:
Το CSS Grid περιλαμβάνει επίσης πολλά άλλες ιδιότητες που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε πιο σύνθετες διατάξεις.
Ποιο πρέπει να χρησιμοποιήσετε;
Πρώτον, είναι σημαντικό να σημειωθεί ότι τίποτα δεν σας εμποδίζει να χρησιμοποιήσετε το Flexbox και το Grid μαζί και, σε ορισμένες περιπτώσεις, αυτή είναι η βέλτιστη επιλογή. Τούτου λεχθέντος, ας απαντήσουμε στο ερώτημα ποιες διατάξεις είναι πιο κατάλληλο για την εφαρμογή καθενός από αυτά τα συστήματα.
Το Flexbox ταιριάζει καλύτερα σε διατάξεις κτιρίων που περιλαμβάνουν ευθυγράμμιση και διανομή στοιχείων σε μία μόνο γραμμή. Παραδείγματα αυτού του είδους διάταξης είναι η στοίχιση εικονιδίων στο τέλος μιας ενότητας ή η διάταξη των συνδέσμων σε μια γραμμή πλοήγησης.
Το πλέγμα, από την άλλη πλευρά, λάμπει περισσότερο όταν πρέπει να τοποθετήσετε με ακρίβεια στοιχεία σε σχέση με άλλα (τόσο οριζόντια όσο και κάθετα) και χρειάζεστε αυτή τη θέση για να προσαρμόζεστε εύκολα σε διάφορα μεγέθη οθόνης.
Για να το αποδείξετε, εδώ είναι ο κώδικας που θα χρειαστεί να γράψετε για να αναδημιουργήσετε τη διάταξη από το παράδειγμα Grid με το Flexbox.
Το HTML:
<div class="δοχείο">
<div class="υπο ένα">
<div>1</div>
<div>5</div>
</div><div class="υπο δύο">
<div>2</div>
</div>
<div class="υπο τρία">
<div>4</div>
<div>3</div>
</div>
</div>
Το CSS:
.δοχείο {
περίγραμμα: 1px συμπαγές μαύρο.
ύψος: 300 px;
}.υπο {
οθόνη: flex;
πλάτος: 100%;
}.ένας, .τρία {
δικαιολογώ-περιεχόμενο: διάστημα-μεταξύ
}.δύο {
justify-content: κέντρο;
}
.υπο > div {
ύψος: 100 px;
πλάτος: 100 px;
Χρώμα φόντου: κόκκινο;
άσπρο χρώμα;
μέγεθος γραμματοσειράς: 5rem;
text-align: κέντρο;
περίγραμμα-ακτίνα: 5px;
}
Και εδώ είναι η έξοδος:
Το κύριο πράγμα που πρέπει να σημειωθεί εδώ είναι ότι ενώ αυτός ο κώδικας παράγει την ίδια έξοδο με το παράδειγμα Grid, η σήμανση εδώ είναι σημαντικά πιο περίπλοκη. Η εφαρμογή αυτής της διάταξης απαιτεί υποδοχεία και πρέπει να τοποθετήσετε τα αριθμημένα div εκτός σειράς στη σήμανση.
Επιπλέον, ας υποθέσουμε ότι έπρεπε να μετατοπίσετε αυτήν τη διάταξη σε μια δύσκολη θέση: ας πούμε ευθυγράμμιση του 5ου div με το 2ο. Εάν χρησιμοποιούσατε το Flexbox για αυτό, θα έπρεπε να καταφύγετε θέση: σχετική ή κάτι παρόμοιο. Χρησιμοποιώντας το Grid, το μόνο που χρειάζεστε είναι να μετατοπίσετε το πλέγμα-στήλη ιδιοκτησία.
Αλλά, αντίθετα, η εφαρμογή της απλής ευθυγράμμισης μιας γραμμής από το παράδειγμα Flexbox με το Grid θα είχε ως αποτέλεσμα πολύ περισσότερο CSS. Το πλέγμα είναι προφανώς λιγότερο κατάλληλο για αυτό το είδος διάταξης.
Ενώ το Flexbox και το Grid μπορούν ως επί το πλείστον να αναπαράγουν τα εφέ του άλλου, υπάρχουν ορισμένες εξαιρέσεις. Η επικάλυψη στοιχείων είναι αρκετά δύσκολη μόνο με το Flexbox, αλλά είναι πολύ εύκολο με το Grid. Το πλέγμα επίσης δεν επιτρέπει στα στοιχεία να απομακρύνονται από άλλα στοιχεία με περιθώριο: αυτόματα όπως το κάνει το Flexbox.
Το Flexbox και το Grid είναι ισχυρά συστήματα διάταξης
Το Flexbox και το CSS Grid είναι και τα δύο συστήματα σχεδιασμού που κάνουν εύκολη τη διάταξη του περιεχομένου της ιστοσελίδας σας. Το πλέγμα είναι το καλύτερο για δισδιάστατες διατάξεις με πολλά στοιχεία που πρέπει να τοποθετηθούν με ακρίβεια μεταξύ τους. Το Flexbox είναι καλύτερο για μονοδιάστατες ή μονογραμμικές διατάξεις όπου χρειάζεται απλώς να τοποθετήσετε ένα σωρό στοιχεία με συγκεκριμένο τρόπο.
