Flexbox - Το Ultimate CSS Flex Cheatsheet (με κινούμενα διαγράμματα!)

Αυτό το πλήρες cheatsheet CSS flexbox θα καλύψει όλα όσα πρέπει να γνωρίζετε για να ξεκινήσετε να χρησιμοποιείτε το flexbox στα έργα σας στο web.

Η διάταξη flexbox CSS σας επιτρέπει να μορφοποιήσετε εύκολα HTML. Το Flexbox διευκολύνει την ευθυγράμμιση στοιχείων κάθετα και οριζόντια χρησιμοποιώντας σειρές και στήλες. Τα στοιχεία θα "κάμψουν" σε διαφορετικά μεγέθη για να γεμίσουν το κενό Κάνει ευκολότερη σχεδίαση απόκρισης.

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

Το άρθρο περιλαμβάνει χρήσιμα κινούμενα gif από τον Scott Domes που θα κάνουν το flexbox ακόμη πιο εύκολο να κατανοηθεί και να απεικονιστεί.

Όλες οι ιδιότητες του CSS Flexbox

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

CSS που μπορεί να εφαρμοστεί στο κοντέινερ

display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow:  ||  justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS που μπορεί να εφαρμοστεί σε αντικείμενα / στοιχεία του κοντέινερ

order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis:  | auto; /* default auto */ flex: none | [  ? ||  ] align-self: auto | flex-start | flex-end | center | baseline | stretch;

Ορολογία

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

  • κύριος άξονας : Ο κύριος άξονας ενός εύκαμπτου εμπορευματοκιβωτίου είναι ο πρωτεύων άξονας κατά τον οποίο τοποθετούνται τα ευέλικτα αντικείμενα. Η κατεύθυνση βασίζεται στην ιδιότητα flex-direction.
  • κύρια εκκίνηση | κεντρικό άκρο :Τα εύκαμπτα αντικείμενα τοποθετούνται μέσα στο δοχείο ξεκινώντας από την πλευρά της κύριας εκκίνησης και πηγαίνουν προς την πλευρά του άκρου.
  • κύριο μέγεθος : Το πλάτος ή το ύψος ενός εύκαμπτου εμπορευματοκιβωτίου ή ενός εύκαμπτου αντικειμένου, όποιο και αν είναι στην κύρια διάσταση, είναι το κύριο μέγεθος αυτού του κουτιού. Η ιδιότητα του κύριου μεγέθους είναι είτε η ιδιότητα πλάτους είτε ύψους, όποια και αν είναι στην κύρια διάσταση.
  • εγκάρσιος άξονας : Ο άξονας κάθετος προς τον κύριο άξονα ονομάζεται διασταυρούμενος άξονας. Η κατεύθυνση εξαρτάται από την κατεύθυνση του κύριου άξονα.
  • εκκίνηση | cross-end : Οι ευέλικτες γραμμές γεμίζουν με αντικείμενα και τοποθετούνται μέσα στο δοχείο ξεκινώντας από την εγκάρσια πλευρά του εύκαμπτου δοχείου και πηγαίνοντας προς την εγκάρσια πλευρά.
  • διασταυρούμενο μέγεθος : Το πλάτος ή το ύψος ενός εύκαμπτου αντικειμένου, όποιο και αν είναι στη διασταυρούμενη διάσταση, είναι το εγκάρσιο μέγεθος του αντικειμένου. Η ιδιότητα διασταυρούμενου μεγέθους είναι όποιο από το «πλάτος» ή το «ύψος» βρίσκεται στην εγκάρσια διάσταση.

CSS Display Flex

display: flex λέει στο πρόγραμμα περιήγησής σας, "Θέλω να χρησιμοποιήσω το flexbox με αυτό το κοντέινερ, σε παρακαλώ."

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

Για να χρησιμοποιήσετε το flexbox σε μια ενότητα της σελίδας σας, πρώτα μετατρέψτε το γονικό κοντέινερ σε flex κοντέινερ προσθέτοντας display: flex;στο CSS του γονικού κοντέινερ.

Αυτό θα προετοιμάσει αυτό το κοντέινερ ως κάδο flex και θα εφαρμόσει ορισμένες προεπιλεγμένες ιδιότητες flex.

Flex Direction

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

Η προεπιλεγμένη ρύθμιση μετά την εφαρμογή display: flexείναι τα αντικείμενα να τακτοποιούνται κατά μήκος του κύριου άξονα από αριστερά προς τα δεξιά. Το παρακάτω κινούμενο σχέδιο δείχνει τι συμβαίνει όταν flex-direction: columnπροστίθεται στο στοιχείο κοντέινερ.

Μπορείτε επίσης να ρυθμίσετε flex-directionμε row-reverseκαι column-reverse.

Δικαιολογήστε το περιεχόμενο

justify-contentείναι μια ιδιότητα για ευθυγράμμιση αντικειμένων στο κοντέινερ κατά μήκος του κύριου άξονα (βλ. διάγραμμα ορολογίας παραπάνω). Αυτό αλλάζει ανάλογα με τον τρόπο εμφάνισης του περιεχομένου. Μας επιτρέπει να γεμίσουμε οποιοδήποτε κενό χώρο σε σειρές και να ορίσουμε πώς θέλουμε να το «δικαιολογήσουμε».

Εδώ είναι οι πιο κοινές επιλογές μας χρησιμοποιείται για να δικαιολογήσει το περιεχόμενο: flex-start | flex-end | center | space-between | space-around.

Δείτε πώς φαίνονται οι διάφορες επιλογές:

space-betweenδιανέμει αντικείμενα έτσι ώστε το πρώτο στοιχείο να είναι flush με την αρχή και το τελευταίο να είναι flush με το τέλος. space-aroundείναι παρόμοιο, αλλά τα αντικείμενα έχουν χώρο μισού μεγέθους και στα δύο άκρα.

Flex Align Items

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

Ακολουθούν οι πιο κοινές επιλογές που χρησιμοποιούνται για την ευθυγράμμιση στοιχείων: flex-start | flex-end | center | baseline | stretch

Για stretchνα δουλέψετε όπως θα περιμένατε, το ύψος των στοιχείων πρέπει να ρυθμιστεί autoαντί για ένα συγκεκριμένο ύψος.

Αυτό το κινούμενο σχέδιο δείχνει πώς μοιάζουν οι επιλογές:

Τώρα θα χρησιμοποιήσουμε justify-contentκαι τα δύο και align-items. Αυτό θα δείξει τη διαφορά μεταξύ των κύριων αξόνων και των εγκάρσιων αξόνων.

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

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

Έχει όλες τις ίδιες ιδιότητες του align-items.

Στην ακόλουθη κίνηση, το γονικό div έχει το CSS align-items: centerκαι flex-direction: row. Τα πρώτα δύο τετράγωνα περνούν από διαφορετικές align-selfτιμές.

Flex Wrap

Το Flexbox από προεπιλογή θα προσπαθήσει να χωρέσει όλα τα στοιχεία σε μία σειρά. Ωστόσο, μπορείτε να το αλλάξετε με την flex-wrapιδιότητα. Υπάρχουν τρεις τιμές που μπορείτε να χρησιμοποιήσετε για να προσδιορίσετε πότε τα στοιχεία πηγαίνουν σε άλλη σειρά.

Η προεπιλεγμένη τιμή είναι flex-wrap: nowrap. Αυτό θα κάνει τα πάντα να παραμείνουν σε μια σειρά από αριστερά προς τα δεξιά.

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

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

Flex Flow

flex-flow combines the use of flex-wrap and flex-direction into one property. It is used by first setting the direction and then the wrap. Here is an example: flex-flow: column wrap;

Align Content

align-content is used for aligning items with multiple lines. It is for aligning on the cross axis and will have no effect on content that is one line.

Here are the options: align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Vertically Centering with Flexbox

If you want to vertically center all the contents inside a parent element, use align-items. Here is the code to use:

.parent { display: flex; align-items: center; }

Games and Apps

If you want to practice using flexbox, try out these games and apps that will help you master flexbox.

  • Flexbox Defense is a web game where you learn flexbox while trying to stop the incoming enemies from getting past your defenses.
  • Flexbox Froggy is a game where you help Froggy and friends by writing CSS code.
  • Το Flexyboxes είναι μια εφαρμογή που σας επιτρέπει να βλέπετε δείγματα κώδικα και να αλλάζετε παραμέτρους για να δείτε πώς λειτουργεί το Flexbox οπτικά.
  • Το Flexbox Patters είναι ένας ιστότοπος που παρουσιάζει πολλά παραδείγματα Flexbox.

συμπέρασμα

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