Πώς λειτουργεί το Flexbox - εξηγείται με μεγάλες, πολύχρωμες κινούμενες gifs

Το Flexbox υπόσχεται να μας σώσει από τα κακά του απλού CSS (όπως κάθετη ευθυγράμμιση).

Λοιπόν, το Flexbox ικανοποιεί αυτό το στόχο. Ωστόσο, η γνώση του νέου νοητικού μοντέλου μπορεί να αποτελέσει πρόκληση.

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

Η βασική αρχή του Flexbox είναι να κάνει τις διατάξεις ευέλικτες και διαισθητικές.

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

Όλα αυτά ακούγονται καλά κατ 'αρχήν. Αλλά ας δούμε τι φαίνεται στην πράξη.

Σε αυτό το άρθρο, θα βυθίσουμε τις 5 πιο συνηθισμένες ιδιότητες του Flexbox. Θα διερευνήσουμε τι κάνουν, πώς μπορείτε να τα χρησιμοποιήσετε και ποια θα είναι τα αποτελέσματά τους.

Ιδιότητα # 1: Οθόνη: Flex

Ακολουθεί το παράδειγμα της ιστοσελίδας μας:

Έχετε τέσσερις χρωματιστές μάζες διαφόρων μεγεθών, που κρατούνται μέσα σε ένα γκρίζο δοχείο. Από τώρα, κάθε div έχει αθετήσει την εμφάνιση: block. Κάθε τετράγωνο καταλαμβάνει έτσι το πλήρες πλάτος της γραμμής του.

Για να ξεκινήσετε με το Flexbox, πρέπει να φτιάξετε το δοχείο σας σε ένα εύκαμπτο δοχείο. Αυτό είναι τόσο εύκολο όσο:

#container {
  οθόνη: flex;
}}

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

Τώρα μπορείτε να αρχίσετε να τα τοποθετείτε μέσα σε αυτό το πλαίσιο, με πολύ λιγότερη δυσκολία από το παραδοσιακό CSS.

Ιδιότητα # 2: Κατεύθυνση Flex

Ένα εμπορευματοκιβώτιο Flexbox έχει δύο άξονες: έναν κύριο άξονα και έναν εγκάρσιο άξονα, τα οποία προεπιλεγμένα φαίνεται σαν αυτό:

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

Κατεύθυνση ευθυγράμμισης, ωστόσο, ας περιστρέψουμε τον κύριο άξονα.

#container {
  οθόνη: flex;
  ευέλικτη κατεύθυνση: στήλη.
}}

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

Υπάρχουν μερικές άλλες επιλογές για την κατεύθυνση ευελιξίας, καθώς και: σειρά-αντίστροφη και στήλη-αντίστροφη.

Ακίνητο # 3: Δικαιολογήστε το περιεχόμενο

Το Justify-content ελέγχει τον τρόπο με τον οποίο ευθυγραμμίζετε στοιχεία στον κύριο άξονα.

Εδώ, θα βουτήξετε λίγο βαθύτερα στην κύρια / σταυροειδής διάκριση. Πρώτον, ας επιστρέψουμε στην ευελιξία: σειρά.

#container {
  οθόνη: flex;
  ευέλικτη κατεύθυνση: σειρά?
  justify-content: flex-start;
}}

Έχετε στη διάθεσή σας πέντε εντολές για να χρησιμοποιήσετε το justify-content:

  1. Flex-start
  2. Flex-end
  3. Κέντρο
  4. Διάστημα μεταξύ
  5. Διάστημα γύρω

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

Το Space-γύρω τοποθετεί ένα ίσιο μαξιλάρι χώρου σε κάθε πλευρά της πλατείας - που σημαίνει ότι ο χώρος μεταξύ των εξώτατων τετραγώνων και του δοχείου είναι μισός όσο ο χώρος ανάμεσα σε δύο τετράγωνα (κάθε τετράγωνο συνεισφέροντας ένα μη αλληλεπικαλυπτόμενο ίσο περιθώριο, διπλασιάζοντας έτσι τον χώρο).

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

Ακίνητα # 4: Ευθυγράμμιση αντικειμένων

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

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

Ας επαναφέρουμε την κατεύθυνση ευκαμψίας στη σειρά, έτσι ώστε οι άξονές μας να μοιάζουν με την παραπάνω εικόνα.

Στη συνέχεια, ας δούμε τις εντολές ευθυγράμμισης-στοιχείων.

  1. flex-start
  2. flex-end
  3. κέντρο
  4. τέντωμα
  5. βασική γραμμή

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

Τα επόμενα δύο είναι λίγο διαφορετικά, ωστόσο.

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

(Σημειώστε ότι για τα στοιχεία ευθυγράμμισης: τέντωμα, έπρεπε να ρυθμίσω το ύψος των τετραγώνων σε auto. Διαφορετικά, η ιδιότητα ύψους θα υπερισχύει του τεντώματος.)

Για τη βασική γραμμή, να γνωρίζετε ότι εάν αφαιρέσετε τις ετικέτες των παραγράφων, ευθυγραμμίζει το κάτω μέρος των τετραγώνων, όπως συμβαίνει:

Για να δείξουμε καλύτερα τους κύριους και τους εγκάρσιους άξονες, ας συνδυάσουμε το justify-content και τα στοιχεία ευθυγράμμισης και δείτε πώς το centering λειτουργεί διαφορετικά για τις δύο εντολές flex-direction:

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

Ακόμα κι αν τα τετράγωνα είναι κεντραρισμένα τόσο κάθετα όσο και οριζόντια και στις δύο περιπτώσεις, τα δύο δεν είναι εναλλάξιμα!

Ακίνητο # 5: Ευθυγραμμίστε τον εαυτό σας

Το Align-self σας επιτρέπει να χειρίζεστε χειροκίνητα την ευθυγράμμιση ενός συγκεκριμένου στοιχείου.

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

#container {
  ευθυγράμμιση-αντικείμενα: flex-start;
}}
.square # one {
  ευθυγράμμιση-εαυτό: κέντρο;
}}
// Μόνο αυτό το τετράγωνο θα είναι κεντραρισμένο.

Ας δούμε τι φαίνεται αυτό. Θα εφαρμόσετε την ευθυγράμμιση σε δύο τετράγωνα, και για τα υπόλοιπα εφαρμόστε τα στοιχεία ευθυγράμμισης: κέντρο και κατεύθυνση ευκαμψίας: σειρά.

συμπέρασμα

Παρόλο που έχουμε μόλις ξύσει την επιφάνεια του Flexbox, αυτές οι εντολές θα πρέπει να είναι αρκετές για να μπορείτε να χειρίζεστε τις περισσότερες βασικές ευθυγραμμίσεις - και να ευθυγραμμίζετε κάθετα με το περιεχόμενο της καρδιάς σας.

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

Ευχαριστώ για την ανάγνωση!