⭐ 0
🔍
Κείμενο Εικόνα PDF & Έγγραφα Ήχος Μουσική Ηλεκτρονικά Χρόνος Βοηθητικά προγράμματα Επικυρωτές Εσωτερισμός Παιχνίδια

Γεννήτρια CSS Flexbox

Δημιουργήστε οπτικά μια διάταξη CSS flexbox: flex-direction, justify-content, align-items, flex-wrap και gap στον container, συν flex-grow, flex-shrink και flex-basis για κάθε παιδί, όλα με ζωντανή προεπισκόπηση και αντιγράψιμη CSS.

🔒 Επεξεργάζεται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας — τίποτα που εισάγετε εδώ δεν μεταφορτώνεται ποτέ.

Επεξεργασία... 0%

Αποτέλεσμα

Μια διάταξη flexbox έχει δύο ξεχωριστά σετ κανόνων — ιδιότητες στον container (flex-direction, justify-content, align-items, flex-wrap, gap) και ιδιότητες σε κάθε παιδί (flex-grow, flex-shrink, flex-basis) — και το μπέρδεμά τους είναι η πιο συνηθισμένη πηγή σφαλμάτων του τύπου «γιατί δεν κεντράρεται / μεγαλώνει / αναδιπλώνεται όπως περιμένω». Αυτή η γεννήτρια βάζει και τα δύο σετ κανόνων στην οθόνη ταυτόχρονα: αλλάξτε οποιαδήποτε ρύθμιση του container ή τα πεδία οποιουδήποτε παιδιού και τρία αριθμημένα, χρωματικά κωδικοποιημένα πλαίσια ενημερώνονται αμέσως, ώστε η αιτία και το αποτέλεσμα να παραμένουν ορατά.

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

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

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

Απολαμβάνετε αυτό το εργαλείο; Θεωρείτε αυτό το προϊόν χρήσιμο; Βλέπετε προοπτικές σε αυτό και θέλετε να το υποστηρίξετε;

🛡️
Εκτελείται στο Πρόγραμμα Περιήγησης

Τα αρχεία και οι εισαγωγές σας δεν φεύγουν ποτέ από αυτή τη συσκευή. Η επεξεργασία εκτελείται εντελώς εκτός σύνδεσης. 100% Ασφαλές.

Αποδεκτές Μορφές & Κανόνες

  • Ρυθμίσεις container: flex-direction, justify-content, align-items, flex-wrap και ένα πεδίο gap σε pixels, που εφαρμόζονται ζωντανά στην προεπισκόπηση.
  • Τρία χρωματικά κωδικοποιημένα πλαίσια-παιδιά από προεπιλογή (προσθέστε έως οκτώ, αφαιρέστε μέχρι δύο), το καθένα με τα δικά του πεδία flex-grow, flex-shrink και flex-basis.
  • Αντιγράψιμο μπλοκ CSS με έναν κανόνα .flex-container συν έναν κανόνα .flex-item-N για κάθε παιδί που έχει μη προεπιλεγμένες ιδιότητες flex.

Βασικά Πλεονεκτήματα

✓ Κάθε ρύθμιση του container και τα flex-grow, flex-shrink και flex-basis κάθε παιδιού ενημερώνουν ζωντανά τρία αριθμημένα πλαίσια προεπισκόπησης, ώστε να βλέπετε ακριβώς τι κάνουν οι κανόνες flexbox πριν αγγίξετε ένα stylesheet.
✓ Η γεννήτρια εκτυπώνει μόνο κανόνες για τα παιδιά που όντως διαφέρουν από τις προεπιλεγμένες τιμές της CSS, ώστε ο κώδικας που αντιγράφετε να παραμένει σύντομος και ευανάγνωστος αντί να επαναλαμβάνει το flex-grow: 0 σε κάθε πλαίσιο.
✓ Οι προκαθορισμένες σελίδες λύνουν τις διατάξεις που αναζητά ο κόσμος ονομαστικά: κεντράρισμα ενός div, μια μπάρα πλοήγησης με λογότυπο αριστερά και συνδέσμους δεξιά, και στήλες ίσου πλάτους που προσαρμόζονται — ανοίξτε μία και το εργαλείο είναι ήδη ρυθμισμένο.

Περιπτώσεις Χρήσης

  • • Δείτε ζωντανά πώς λειτουργούν τα justify-content και align-items στα προεπισκόπηση κουτιά και πάρτε τον ακριβή κώδικα CSS για να κεντράρετε ένα div οριζόντια και κάθετα.
  • • Δημιουργήστε μια διάταξη navbar με το λογότυπο αριστερά και τους συνδέσμους δεξιά, χρησιμοποιώντας space-between και align-items: center, και μετά αντιγράψτε τον κώδικα CSS του container κατευθείαν στο header component σας.
  • • Συγκρίνετε τα space-between, space-around και space-evenly δίπλα-δίπλα στα ίδια τρία κουτιά, αντί να μαντεύετε ποιο ταιριάζει στην απόσταση που θέλετε.