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

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

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

Τώρα ας ρίξουμε μια βαθιά ματιά στο μέγεθος Flexbox - και πώς μπορείτε να το χρησιμοποιήσετε για να χτίσετε προσαρμόσιμες και όμορφες διατάξεις.

Ιδιότητα # 1: Flex-Basis

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

Η πρώτη μας ιδιότητα είναι, κατά τη γνώμη μου, μία από τις λιγότερο καλά εξηγηθείσες ιδιότητες στα μαθήματα Flexbox.

Αλλά - μην ανησυχείς. Είναι πραγματικά πολύ απλό.

Η βασική λειτουργία Flex ελέγχει το προεπιλεγμένο μέγεθος ενός στοιχείου, προτού χειριστεί άλλες ιδιότητες του Flexbox (περισσότερα για αυτό αργότερα).

Στο παρακάτω GIF, αυτό σημαίνει ότι είναι εναλλάξιμο με την ιδιότητα πλάτους:

Αυτό που καθιστά την ευέλικτη βάση μοναδική από το πλάτος, ωστόσο, είναι ότι αντιστοιχεί στους καλούς μας άξονες flex:

Η βάση Flex επηρεάζει το μέγεθος ενός στοιχείου στον κύριο άξονα.

Ας δούμε τι συμβαίνει όταν διατηρούμε την ευελιξία μας ίδια, αλλά αλλάζουμε την κατεύθυνση του κύριου άξονά μας:

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

Ακίνητο # 2: Flex Grow

Τώρα θα πάμε λίγο πιο περίπλοκο.

Αρχικά, ας ορίσουμε όλα τα τετράγωνα μας στο ίδιο πλάτος, 120px:

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

Τι σημαίνει αυτό? Λοιπόν, ας προσπαθήσουμε να αυξήσουμε το flex-grow σε 1 για κάθε τετράγωνο:

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

Το συγχέοντας μέρος για την ευελιξία, όμως, είναι αυτό που πραγματικά σημαίνει η αξία. Τι σημαίνει ευελιξία: 1 στην πραγματικότητα σημαίνει;

Λοιπόν, εδώ είναι αυτό που μοιάζει αν θέσουμε την ευέλικτη ανάπτυξη κάθε τετραγώνου σε 999:

Είναι ... ακριβώς το ίδιο.

Αυτό συμβαίνει επειδή η ευελιξία δεν είναι απόλυτη αξία - είναι μια σχετική αξία.

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

Αν θέσουμε κάθε τετράγωνο να φουσκώσει: 1, και στη συνέχεια να προσαρμόσουμε την πλατεία # 3 του flex-grow, τότε βλέπουμε τις αλλαγές:

Για να καταλάβουμε πραγματικά τι συμβαίνει εδώ, ας πάρουμε μια γρήγορη παράκαμψη σε κάποια (απλά) μαθηματικά.

Κάθε τετράγωνο αρχίζει με μια ευέλικτη ανάπτυξη 1. Αν προσθέσουμε την ευέλικτη ανάπτυξη κάθε τετραγώνου, το σύνολο μας είναι έξι. Ο περιέκτης χωρίζεται έτσι σε 6 ξεχωριστά τμήματα. Κάθε τετράγωνο μεγαλώνει για να γεμίσει το 1/6 του διαθέσιμου χώρου στο δοχείο.

Όταν ορίσαμε την ευέλικτη ανάπτυξη της πλατείας # 3 έως 2, το δοχείο χωρίζεται τώρα σε 7 διαφορετικά τμήματα, αφού το σύνολο των ιδιοτήτων flex-growth είναι 1 + 1 + 2 + 1 + 1 + 1.

Η πλατεία # 3 παίρνει 2/7 αυτού του χώρου και τα υπόλοιπα 1/7.

Όταν φτάνουμε στο flex-grow: 3 για την πλατεία # 3, το δοχείο χωρίζεται σε 8 τμήματα (1 + 1 + 3 + 1 + 1 + 1) και η πλατεία # 3 παίρνει 3/8, .

Και ούτω καθεξής.

Η ευελιξία είναι μόνο αναλογίες. Αν θέσουμε κάθε τετράγωνο να αναπτυχθεί με ευκαμψία: 4, και το τετράγωνο # 3 για να φουσκώσει: 12, παίρνουμε το ίδιο αποτέλεσμα σαν να ήταν 1 και 3 αντίστοιχα:

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

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

Ακίνητο # 3: Flex Shrink

Το Flex-shrink είναι το αντίθετο του flex-growth, καθορίζοντας πόσο ένα τετράγωνο επιτρέπεται να συρρικνωθεί.

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

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

Ας το δούμε στη δράση. Στο παρακάτω GIFS, τα τετράγωνα έχουν μια ευέλικτη ανάπτυξη 1, έτσι γεμίζουν το δοχείο, και ένα flex-συρρικνωθεί 1, έτσι επιτρέπεται να συρρικνωθεί όπως συμβαίνει.

Τώρα ας ρυθμίσουμε το flex-shrink της πλατείας # 3 στο 0. Είναι απαγορευμένο να συρρικνώνεται, έτσι ώστε ενώ μεγαλώνει για να χωρέσει στο δοχείο, αρνείται να βουτήξει κάτω από το καθορισμένο πλάτος 120px.

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

Και πάλι, το flex-shrink είναι περίπου αναλογίες. Εάν ένα κιβώτιο έχει συρρίκνωση 6 και το υπόλοιπο έχει συρρίκνωση 2, το ένα κιβώτιο θα συρρικνωθεί 3 φορές όσο το υπόλοιπο, καθώς ο χώρος συμπιέζει.

Σημειώστε τη διατύπωση εκεί: το τετράγωνο με 3χ flex-shrink θα συρρικνωθεί 3 φορές πιο γρήγορα. Αυτό δεν σημαίνει ότι θα συρρικνωθεί το 1/3 του πλάτους.

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

Ακίνητο # 4: Flex

Το Flex είναι συντομογραφία για ανάπτυξη, συρρίκνωση και βάση - όλα μαζί.

Η προεπιλεγμένη τιμή είναι 0 (αύξηση) 1 (συρρίκνωση) και αυτόματη (βάση).

Για το τελευταίο μας παράδειγμα, ας απλοποιήσουμε σε δύο πλαίσια.

Εδώ είναι οι ιδιότητές τους:

.square # one {
  flex: 2 1 300px;
}}
.square # two {
  flex: 1 2 300px;
}}

Και οι δύο έχουν την ίδια ευέλικτη βάση. Αυτό σημαίνει ότι αν υπάρχει αρκετός χώρος και για τους δύο (το δοχείο είναι 600px συν περιθώριο για περιθώρια και padding), θα είναι και τα δύο πλάτος 300px.

Αλλά καθώς το κιβώτιο μεγαλώνει, η Πλατεία 1 (με την υψηλότερη ευελιξία) θα αναπτυχθεί δύο φορές πιο γρήγορα. Καθώς το κουτί συστέλλεται, η Πλατεία 2 (με την υψηλότερη συρρίκνωση) θα συρρικνωθεί δύο φορές πιο γρήγορα.

Ολοι μαζί τώρα:

Πώς τα πράγματα συρρικνώνονται και μεγαλώνουν

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

Δεν είναι το μέγεθός τους που είναι 2 προς 1 ή 1 έως 2. Είναι το ποσοστό τους συρρίκνωσης και ανάπτυξης.

Ένα μικρό μαθηματικό

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

Όταν το δοχείο έχει οριστεί σε 430ppx, χάσαμε 210px χώρο. Η πλατεία 1, με το flex-συρρίκνωση του 1, χάνει 70px. Η πλατεία 2, με το flex-συρρίκνωση 2, χάνει 140px.

Όταν το δοχείο συρρικνώνεται σε 340px, έχουμε χάσει τώρα 300px χώρο. Η πλατεία 1 χάνει 100px, η πλατεία 2 χάνει 200px.

Ο χαμένος χώρος διαιρείται σύμφωνα με την αναλογία των αντίστοιχων συρρικνώσεων (2 προς 1).

Είναι η ίδια ιστορία με το flex-grow. Όταν το δοχείο μεγαλώνει σε 940p, και έχουμε κερδίσει 300px χώρο, η Πλατεία 1 παίρνει επιπλέον 200px, και η Πλατεία 2 παίρνει επιπλέον 100px.

Όταν πρόκειται για ιδιότητες flex, οι αναλογίες είναι το όνομα του παιχνιδιού.

Στο παραπάνω GIF, μπορείτε να δείτε πώς ρυθμίζεται το πλάτος σύμφωνα με τους λόγους, με το δέλτα (Δ) να δείχνει τη διαφορά από τη βάση flex.

συμπέρασμα

Ως τελική ανασκόπηση: η βάση ευελιξίας ελέγχει πόσο μεγάλο στοιχείο θα είναι κατά μήκος του κύριου άξονα πριν εμφανιστεί οποιαδήποτε ανάπτυξη ή συρρίκνωση. Το Flex-Grow προσδιορίζει πόσο θα αυξηθεί ανάλογα με τα αδέρφια στοιχεία, και το flex-shrink καθορίζει πόσο θα συρρικνωθεί.

Έχουμε μερικές ακόμα ιδιότητες του Flexbox για να καλύψουμε - προσέξτε για τις επόμενες εβδομάδες.

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

Εάν υπάρχει μια συγκεκριμένη ιδέα (Flexbox ή άλλως) που θα θέλατε να δείτε εξηγηθεί σε ένα παρόμοιο άρθρο, αφήστε μια απάντηση ή tweet μου. Μπορείτε επίσης να με ακολουθήσετε στο Twitter και το Medium (πατώντας το παρακάτω κουμπί).