Flexbox: Έλεγχος μείωσης της κατεύθυνσης flex με flex-shrink

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

Βασικά συμπεράσματα

• Το flex-shrink καθορίζει πόσο μπορεί να συρρικνωθεί ένα στοιχείο εάν δεν υπάρχει αρκετός χώρος.
• Η προεπιλεγμένη τιμή για το flex-shrink είναι 1, πράγμα που σημαίνει ότι ένα στοιχείο μπορεί να καταλάβει χώρο ανάλογα με το πόσος χώρος είναι διαθέσιμος και πόσα άλλα στοιχεία έχουν οριστεί στο δοχείο.
• Μπορείτε να χρησιμοποιήσετε το flex-shrink για να ορίσετε μια συγκεκριμένη αναλογία για τη συρρίκνωση μεταξύ πολλών στοιχείων.

Οδηγίες βήμα προς βήμα

Στη συνέχεια θα σας εξηγήσω τα βήματα για να αξιοποιήσετε στο έπακρο το flex-shrink. Θα παρέχω κάθε βήμα με μεταβλητές στιγμιότυπα οθόνης που μπορείτε αργότερα να αντικαταστήσετε με τα αντίστοιχα στιγμιότυπα οθόνης από το βίντεο.

Αρχικά, θα δείτε μια βασική εφαρμογή flexbox σε CSS. Έχετε τρία στοιχεία που έχουν flex-base 100 pixels. Εάν υπάρχει αρκετός χώρος στο flexbox container, όλα παραμένουν όπως έχουν σχεδιαστεί.

Τώρα μειώνουμε το ύψος του δοχείου στα 200 pixels. Σε αυτή την περίπτωση, ο απαιτούμενος χώρος είναι μεγαλύτερος από το ύψος του container. Τα στοιχεία εξακολουθούν να έχουν flex-base 100 pixels και επομένως δεν μπορούν να συρρικνωθούν επειδή έχουμε ορίσει το flex-shrink σε 0.

Για να ενεργοποιήσετε το μηχανισμό συρρίκνωσης, αλλάξτε την τιμή του flex-shrink. Ορίστε την τιμή 1 για το στοιχείο nav για να ενημερώσετε το CSS ότι το στοιχείο nav πρέπει να συρρικνωθεί όσο το δυνατόν περισσότερο.

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

Αν θέλετε όλα τα στοιχεία να συρρικνωθούν εξίσου, ορίστε το flex-shrink για όλα τα στοιχεία σε 1. Αν το container γίνει τώρα μικρότερο από τον απαιτούμενο χώρο, όλα τα στοιχεία θα συρρικνωθούν ανάλογα.

Για να συνοψίσετε τον τρόπο με τον οποίο οι διαφορετικές τιμές flex-shrink επηρεάζουν τη διάταξη, επιλέξτε μια αναλογία όπως 1:1:2. Σε αυτή την περίπτωση, η κύρια περιοχή (main) λαμβάνει το μεγαλύτερο ποσοστό συρρίκνωσης, ενώ τα άλλα στοιχεία λαμβάνουν το καθένα το μικρότερο ποσοστό.

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

Τέλος, μπορείτε να συνδυάσετε τις τιμές flex-grow, flex-shrink και flex-base όλες μαζί, γεγονός που σας δίνει μεγαλύτερη ευελιξία κατά το σχεδιασμό της διάταξης σε CSS. Βεβαιωθείτε ότι τις προσαρμόζετε πάντα στις απαιτήσεις του σχεδιασμού σας.

Περίληψη

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