CSS Flexbox Generator

Μια διάταξη flexbox έχει δύο ξεχωριστά βιβλία κανόνων — ιδιότητες στο κοντέινερ (flex-direction, justify-content, align-items, flex-wrap, gap) και ιδιότητες σε κάθε παιδί (flex-grow, flex-shrink, flex-basis) — και η ανάμειξή τους είναι η πιο συνηθισμένη πηγή του "why isn't wrapping way growing / wrags centring /". Αυτή η γεννήτρια τοποθετεί και τα δύο βιβλία κανόνων στην οθόνη ταυτόχρονα: αλλάξτε οποιοδήποτε στοιχείο ελέγχου κοντέινερ ή τα πεδία οποιουδήποτε παιδιού και τρία αριθμημένα, χρωματικά κωδικοποιημένα πλαίσια ενημερώνονται αμέσως, ώστε η αιτία και το αποτέλεσμα να παραμένουν ορατά.

Η πλευρά του κοντέινερ καλύπτει κάθε άξονα διάταξης: επιλέξτε μια κατεύθυνση, επιλέξτε πώς κατανέμονται τα παιδιά κατά μήκος του κύριου άξονα με δικαιολογία-περιεχόμενο, ευθυγραμμίστε τα στον εγκάρσιο άξονα, αποφασίστε εάν θα τυλιχτούν σε νέες γραμμές και ορίστε ένα κενό αντί για χακάρισμα περιθωρίου μεταξύ τους. Η θυγατρική πλευρά είναι εξίσου πραγματική: προσθέστε πλαίσια έως οκτώ, αφαιρέστε έως δύο και δώστε σε καθένα από αυτά το δικό του flex-grow, flex-shrink και flex-base — η γεννήτρια εκτυπώνει έναν κανόνα CSS ανά παιδί μόνο όταν τουλάχιστον ένας από αυτούς διαφέρει από την προεπιλογή του προγράμματος περιήγησης, έτσι ώστε ο αντιγραμμένος κώδικας να μην συμπληρώνεται ποτέ με flex-grow: 0 στο πλαίσιο flex-grow: 0 στο πλαίσιο.

Οι προκαθορισμένες σελίδες μεταπηδούν κατευθείαν στις διατάξεις που αναζητούν οι άνθρωποι με το όνομα: πώς να κεντράρετε ένα div (η πιο συχνή ερώτηση διάταξης CSS, που λύθηκε με το justify-content και στοίχιση-στοιχεία και τα δύο στο κέντρο), ένα λογότυπο-αριστεροί σύνδεσμοι-δεξιά γραμμή πλοήγησης, ευέλικτες στήλες ίσου πλάτους μέσω flex-grow και σύγκριση του space-by-bete-. χώρο-ομοιόμορφα.

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