Στήλες Flexbox ίσου πλάτους — Γεννήτρια CSS
Δημιουργήστε μια διάταξη flexbox CSS οπτικά: flex-direction, justify-content, align-items, flex-wrap and gap στο κοντέινερ, καθώς και ανά παιδί flex-grow, flex-shrink και flex-base, όλα με ζωντανή προεπισκόπηση και CSS με δυνατότητα αντιγραφής.
Αποτέλεσμα
Αυτή η σελίδα ανοίγει τη γεννήτρια με flex-grow: 1 έχει ήδη οριστεί και στα τρία πλαίσια προεπισκόπησης. Παρακολουθήστε τις: αντί να συρρικνώνεται για να ταιριάζει στο περιεχόμενό τους, κάθε πλαίσιο διεκδικεί το ίδιο μερίδιο του εναπομείναντος χώρου στη σειρά, που είναι η όλη συνταγή για ευέλικτες στήλες ίσου πλάτους — χωρίς ποσοστά πλάτη, χωρίς calc(), χωρίς σταθερά μαθηματικά pixel για συγχρονισμό.
flex-grow: Το 1 λέει σε ένα παιδί να μεγαλώσει και η ρύθμιση του σε κάθε παιδί στη σειρά σημαίνει ότι όλα μεγαλώνουν με την ίδια ποσότητα, επομένως καταλήγουν στο ίδιο πλάτος ανεξάρτητα από το πόσα είναι ή τι περιεχόμενο βρίσκεται μέσα τους. Προσθέστε ή αφαιρέστε ένα πλαίσιο με τα στοιχεία ελέγχου παρακάτω και οι υπόλοιπες στήλες αναδιανέμονται αμέσως για να παραμείνουν ίσες — αλλάξτε το μέγεθος ενός παραθύρου του προγράμματος περιήγησης σε αυτήν τη διάταξη στην παραγωγή και συμπεριφέρεται με τον ίδιο τρόπο.
Αυτό είναι το μοτίβο πίσω από πλέγματα καρτών ίσου ύψους, στήλες πίνακα τιμών και ομοιόμορφα διαχωρισμένα τμήματα υποσέλιδου. Δώστε σε μια στήλη περισσότερο χώρο ανεβάζοντας την ευέλικτη ανάπτυξη πάνω από τις άλλες ή αντιγράψτε το μπλοκ CSS παρακάτω ακριβώς όπως δημιουργήθηκε για καθαρό ίσο διαχωρισμό.