Ένας οπτικός οδηγός για το CSS Flexbox

Τι είναι το CSS Flexbox;

Σύμφωνα με τα έγγραφα του MDN web:

«Το CSS Flexible Box Layout είναι μια ενότητα CSS που καθορίζει ένα μοντέλο πλαισίου CSS βελτιστοποιημένο για το σχεδιασμό διεπαφής χρήστη και τη διάταξη των αντικειμένων σε μία διάσταση. Στο μοντέλο της ευέλικτης διάταξης, τα παιδιά ενός εύκαμπτου δοχείου μπορούν να τοποθετηθούν προς οποιαδήποτε κατεύθυνση και μπορούν να «λυγίσουν» τα μεγέθη τους, είτε μεγαλώνουν για να γεμίσουν τον αχρησιμοποίητο χώρο είτε να συρρικνωθούν για να αποφευχθεί η υπερχείλιση του γονέα. Τόσο η οριζόντια όσο και η κάθετη ευθυγράμμιση των παιδιών μπορούν να χειριστούν εύκολα. "

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

Ας ρίξουμε μια γρήγορη ματιά σε μερικά παραδείγματα για το τι μπορεί να γίνει με τουλάχιστον 1-2 γραμμές κωδικών χρησιμοποιώντας το CSS flexbox:

Οριζόντια διάταξη ευθυγράμμισης:

Διάταξη κάθετης ευθυγράμμισης:

Είναι αρκετά δροσερό, δεδομένου ότι χρειάστηκαν μόνο μία ή δύο γραμμές CSS για τον χειρισμό της διάταξης μέσα σε κάθε κοντέινερ.

Τα βασικά

Οι ιδιότητες Flexbox μπορούν να κατηγοριοποιηθούν σε 2 κύριους τύπους:

  1. Ιδιότητες κοντέινερ (flex-direction, flex-wrap, justify-content, align-items, align-content)
  2. Ιδιότητες Flex Item (σειρά, flex, flex-grow, flex-shrink, align-self)

Οθόνη: flex

Η πρώτη ιδιότητα δεν είναι συγκεκριμένη για το flexbox. Αυτό το ξενοδοχείο είναι displayπου θέσαμε με την αξία: flex. Αυτό έχει ρυθμιστεί στο κοντέινερ που περιέχει τα στοιχεία που θέλουμε να χειριστούμε.

Ας προσθέσουμε μερικά γραφικά για να καταλάβουμε πώς λειτουργεί:

Εάν έχουμε αρχικά ένα δοχείο, με 3 κουτιά ( div) μέσα του Έτσι θα μοιάζουν:

Τώρα ας προσθέσουμε flexστο κοντέινερ:

Μόνο μια γραμμή CSS άλλαξε τη διάταξη από κάθετη σε οριζόντια.

Σημαντικές ορολογίες γύρω από το Flexbox

Αυτές οι ορολογίες θα χρησιμοποιηθούν σε ολόκληρο τον οδηγό.

  1. Flex Container: Αυτό αναφέρεται στο δοχείο που έχει display: flex;ρυθμιστεί σε αυτό.
  2. Flex Item: Αυτά είναι τα μεμονωμένα παιδιά στο εσωτερικό του Flex Container
  3. Κύριος άξονας : Από προεπιλογή ορίζεται από αριστερά προς τα δεξιά.
  4. Σταυρός άξονας : Από προεπιλογή ορίζεται από πάνω προς τα κάτω.

Μόλις display: flexτοποθετηθεί σε ένα εμπορευματοκιβώτιο, αυτοί οι φανταστικοί άξονες θα συνεργαστούν για να καθορίσουν πώς πρέπει να μετακινούνται και να συμπεριφέρονται τα ευέλικτα αντικείμενα μέσα στο δοχείο flex. Αυτοί οι δύο άξονες αλλάζουν κατευθύνσεις, όποτε αλλάζουμε ορισμένες ιδιότητες flexbox που συζητούνται παρακάτω.

Κατεύθυνση Flex

Αυτή η ιδιότητα καθορίζει την κατεύθυνση των φανταστικών αξόνων. Οι άξονες, με τη σειρά τους, καθορίζουν τον τρόπο τοποθέτησης των αντικειμένων στο δοχείο flex Παίρνει τις ακόλουθες 4 τιμές:

  1. rowείναι η προεπιλεγμένη τιμή του κύριου άξονα που δείχνει από αριστερά προς τα δεξιά. Ο σταυρός άξονας παραμένει από πάνω προς τα κάτω.
  2. row-reverseαντιστρέφει την κατεύθυνση της σειράς από δεξιά προς αριστερά. Και πάλι, ο σταυρός άξονας δεν επηρεάζεται.

3. columnαλλάζει τον κύριο άξονα από τον οριζόντιο άξονα στον κατακόρυφο άξονα. Αυτό σημαίνει ότι ο κύριος άξονας ρέει τώρα από πάνω προς τα κάτω ενώ ο σταυρός άξονας ρέει από αριστερά προς τα δεξιά.

4. column-reverseείναι παρόμοιο με την τιμή της στήλης με τη μόνη διαφορά ότι ο κύριος άξονας ρέει τώρα από κάτω προς τα πάνω.

Flex-wrap

Το flex-container από προεπιλογή δεν επιτρέπει στα στοιχεία να καταλαμβάνουν πολλές γραμμές στη σειρά. Αντ 'αυτού, όλα τα αντικείμενα θα τακτοποιηθούν ώστε να χωρέσουν σε μια σειρά, δηλαδή, δεν επιτρέπει την τυλίγοντας σε πολλές γραμμές.

  1. flex-wrap: no-wrap είναι η προεπιλογή.

2 flex-wrap: wrap. Αλλάζοντας αυτήν την ιδιότητα σε wrap, μπορούμε τώρα να διασφαλίσουμε ότι κάθε στοιχείο flex θα διατηρήσει τα αντίστοιχα μεγέθη του. Εάν δεν μπορούν να χωρέσουν σε μία γραμμή, θα τυλίξουν σε μια επόμενη σειρά ή στήλη ανάλογα με την κατεύθυνση κάμψης.

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

3. wrap-reverseαπό την άλλη πλευρά θα τυλίξει την επόμενη σειρά ευέλικτων αντικειμένων πάνω από την αρχική, ακόμα από αριστερά προς τα δεξιά.

Αιτιολόγηση-περιεχόμενο

Αυτή η ιδιότητα χρησιμοποιείται πολύ συχνά. Σκοπός του είναι να διανείμει χώρο μεταξύ flex-item σε ένα flex-container κατά μήκος του κύριου άξονα . Η προεπιλεγμένη τιμή έχει οριστεί σε flex-start.

Θυμηθείτε: Εάν η ευέλικτη κατεύθυνση έχει ρυθμιστεί στη στήλη, τότε ο κύριος άξονας θα ρέει τώρα από πάνω προς τα κάτω. Αυτό σημαίνει ότι το justify-content θα διανέμει τα αντικείμενα με κάθετο τρόπο.

Στοίχιση-αντικείμενα

Αυτή η ιδιότητα είναι εξίσου δημοφιλής justify-contentκαι χρησιμοποιείται τακτικά με το flexbox. Κάνει το ίδιο πράγμα justify-contentμε τη μόνη διαφορά ότι λειτουργεί κατά μήκος του άξονα . Η προεπιλεγμένη τιμή align-itemsείναι stretch.

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

Ευθυγράμμιση περιεχομένου

Αυτή η ιδιότητα είναι παρόμοια με και μπορεί εύκολα να συγχέεται align-items. Ο σκοπός αυτής της ιδιότητας είναι να προσδιορίσει πώς πρέπει να κατανέμεται ο χώρος μεταξύ των σειρών σε ένα εύκαμπτο δοχείο κατά μήκος του σταυρού άξονα .

Ενώ align-itemsστοχεύει το διάστημα μεταξύ των στοιχείων flex, align-contentστοχεύει σειρές μεταξύ των αντικειμένων. Η προεπιλεγμένη τιμή align-contentείναι stretch.

Flex Item Properties

Ώρα να προχωρήσουμε στον δεύτερο τύπο ιδιοτήτων flexbox που μας επιτρέπει να στοχεύουμε τα μεμονωμένα αντικείμενα μέσα σε ένα δοχείο flex.

Ευθυγραμμίστε τον εαυτό σας

Αυτή η ιδιότητα σάς επιτρέπει να ευθυγραμμίσετε ένα μεμονωμένο εύκαμπτο στοιχείο κατά μήκος του άξονα. Παρακάμπτει τη ρύθμιση ευθυγράμμισης στο δοχείο align-items.

Παίρνει επίσης τις ίδιες ιδιότητες όπως align-items(βλέπε παραπάνω).

Σειρά

Αυτή η ιδιότητα μας επιτρέπει να αναδιατάξουμε τις θέσεις των μεμονωμένων στοιχείων flex στο εσωτερικό του flex container. Από προεπιλογή, όλα τα στοιχεία έχουν τιμή 0 εκχωρημένα σε αυτά.

Αναθέτοντας μια τιμή χαμηλότερη (-ve) ή μεγαλύτερη (+ ve) μέσω orderτων μεμονωμένων στοιχείων, αυτό το συγκεκριμένο στοιχείο θα μετακινηθεί για να τοποθετηθεί σύμφωνα με τις τιμές τους.

Η παραγγελία θα ακολουθήσει την πιο λογική σύμβαση, δηλαδή -ve, 0, + ve. Ο χαμηλότερος αριθμός θα πάει στην άκρα αριστερά και ο μεγαλύτερος αριθμός στην άκρα δεξιά, με την προϋπόθεση ότι όλα τα άλλα έχουν οριστεί ως προεπιλογή. Εάν υπάρχουν στοιχεία που δεν έχουν εκχωρηθεί νέα τιμή, παραμένουν ως 0.

Σημείωση: Τα πλαίσια, 1, 2, 5 και 6 στο παραπάνω παράδειγμα παραμένουν στην προεπιλεγμένη τιμή 0. Για να διευκρινιστεί, τα έξι παραπάνω κουτιά έχουν τις ακόλουθες τιμές: -1, 0, 0, 0, 0, 1 .

Εάν θέλετε να τοποθετήσετε ένα κουτί μπροστά από το τετράγωνο αριθ. 4, τότε πρέπει να ορίσετε το στοχευμένο κουτί σας με τάξη -2 ή χαμηλότερη.

Flex-basis, Flex-grow και Flex-Shrink

Μέχρι στιγμής, όλα τα ευέλικτα αντικείμενα είχαν το ίδιο μέγεθος. Ας δούμε τώρα πώς μπορούμε να κάνουμε ένα συγκεκριμένο στοιχείο flex να καταλαμβάνει περισσότερο χώρο μέσα σε ένα flex-container σε σύγκριση με τα άλλα αντικείμενα μέσα στο ίδιο δοχείο.

Flex-βάση

Αυτή η ιδιότητα καθορίζει το ιδανικό μέγεθος ενός εύκαμπτου αντικειμένου πριν τοποθετηθεί σε ένα δοχείο flex. Λειτουργεί παρόμοια με το πλάτος όταν δουλεύει με σειρές. Λειτουργεί σαν ύψος όταν δουλεύει με στήλες. Επομένως, αν δουλεύουμε με στήλες και έχει δοθεί ένα στοιχείο τόσο σε ύψος όσο και σε βάση flex, το flex-base θα έχει προτεραιότητα καθώς είναι το ιδανικό ύψος που θα πάρει ένα flex-item εάν υπάρχει αρκετός διαθέσιμος χώρος.

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

Flex-grow

Αυτή η ιδιότητα καθορίζει τον τρόπο με τον οποίο μπορούν να αναπτυχθούν τα ευέλικτα στοιχεία προκειμένου να συμπληρωθεί ο αχρησιμοποίητος χώρος σε ένα δοχείο flex.

Εάν αντιστοιχίσουμε ένα flex-grow: 1σε όλα τα πλαίσια, όλα θα πάρουν τον υπόλοιπο χώρο ομοιόμορφα, που είναι και η προεπιλεγμένη τιμή του. Ο αριθμός μπορεί να είναι οτιδήποτε, αρκεί να είναι όλοι ίδιοι.

Εάν δώσουμε flex-grow: 1σε ένα στοιχείο και δώσουμε ένα δεύτερο α flex-grow: 2, τότε το δεύτερο στοιχείο θα πάρει δύο φορές περισσότερο αχρησιμοποίητο χώρο σε σύγκριση με το πρώτο.

Αυτό ισχύει τόσο για τις σειρές όσο και για τις στήλες.

Flex-συρρίκνωση

Αυτή η ιδιότητα καθορίζει πώς οι flex-στοιχεία μπορεί να συρρικνωθεί κάθε φορά που υπάρχει δεν είναι αρκετό χώρο σε ένα flex-κοντέινερ.

Η flex-shrink: 1είναι η προεπιλεγμένη τιμή, πράγμα που σημαίνει ότι όλα τα στοιχεία θα συρρικνωθεί με τον ίδιο ρυθμό από προεπιλογή.

Σημείωση:flex-shrink: 0; σημαίνει ότι αυτό το συγκεκριμένο στοιχείο δεν πρέπει ποτέ να συρρικνωθεί.

flex-shrink: 2; σημαίνει ότι αυτό το συγκεκριμένο αντικείμενο θα πρέπει να συρρικνωθεί γρηγορότερα από τα άλλα flex-shrink: 1;

Καλώδιο

Αυτή είναι η συντομογραφία έκδοση για flex-grow, flex-shrink και flex-base με τη συγκεκριμένη σειρά.

Εάν πρέπει να χρησιμοποιήσετε και τα τρία παραπάνω, θα μπορούσατε απλά να χρησιμοποιήσετε κάτι σαν αυτό:

flex: 0 2 200px; όπου το 0 αναφέρεται στο flex-grow, το 2 αναφέρεται στο flex-shrink και το 200px αναφέρεται στο flex basis αντίστοιχα.

Συγχαρητήρια!

Αυτό είναι! Αυτά είναι τα βασικά συστατικά για να γίνετε flex master. Και όπως για κάθε άλλο πράγμα στη ζωή και στον κώδικα, η πρακτική κάνει τέλεια. Συνιστώ ανεπιφύλακτα να εφαρμόσετε αυτόν τον οδηγό στην πράξη για να αποκτήσετε μια πρακτική κατανόηση. Ένα παράδειγμα θα μπορούσε να είναι να ξεκινήσετε με κάτι μικρό, όπως μια απλή γραμμή πλοήγησης.

Μπορείτε επίσης να δείτε τον σύνδεσμο για τη συλλογή μου Codepen στο flex-box που χρησιμοποίησα για να δημιουργήσω αυτά τα flexbox στις παραπάνω εικόνες και να τα τροποποιήσετε για να δείτε πώς αλλάζουν.

Σας ευχαριστούμε που διαβάσατε αυτόν τον οδηγό στο flexbox. Ελπίζω ότι ήταν χρήσιμο και ενημερωτικό. Εάν έχετε οποιεσδήποτε ερωτήσεις ή θέλετε να μοιραστείτε τις σκέψεις σας σχετικά με αυτό το θέμα, μη διστάσετε να επικοινωνήσετε με την ενότητα σχολίων ή μέσω email στη διεύθυνση [email protected]

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

ZeeshaanMaudar - Επισκόπηση

Κωδικός για διασκέδαση Κωδικός για αλλαγή Κώδικας για κοινωνικό καλό - ZeeshaanMaudar github.com