Flexbox Playground
Πειραματιστείτε με ιδιότητες CSS Flexbox σε ζωντανά στοιχεία και αντιγράψτε το παραγόμενο CSS διάταξης.
—
Όλα εκτελούνται στο πρόγραμμα περιήγησής σας — τίποτα δεν μεταφορτώνεται.
Σχετικά με το Flexbox Playground
Το Flexbox Playground είναι ένα πρακτικό sandbox για το CSS flexbox. Ορίστε τις ιδιότητες του container — flex-direction, flex-wrap, justify-content, align-items, align-content και gap — και παρακολουθήστε έως και 12 ζωντανά στοιχεία να αναδιατάσσονται στην προεπισκόπηση καθώς αλλάζετε κάθε τιμή. Είναι ο πιο γρήγορος τρόπος να κατανοήσετε τι κάνει πραγματικά κάθε ιδιότητα.
Τα στοιχεία είναι επεξεργάσιμα μεμονωμένα: κάντε κλικ σε ένα για να το επιλέξετε και προσαρμόστε το flex-grow, flex-shrink, flex-basis, align-self και order. Βλέποντας ένα στοιχείο να μεγαλώνει για να καταλάβει τον ελεύθερο χώρο ενώ τα αδέρφια του διατηρούν το πλάτος τους, μαθαίνετε το μοντέλο μεγέθους του flex πιο γρήγορα από οποιοδήποτε διάγραμμα.
Το playground παράγει καθαρό CSS για τον container και για κάθε στοιχείο με μη προεπιλεγμένες ρυθμίσεις — αντιγράψτε το απευθείας στο stylesheet σας. Όλα εκτελούνται στον browser σας χωρίς καμία μεταφόρτωση, και ένα κουμπί επαναφοράς σας επαναφέρει σε καθαρή αφετηρία.
Πώς να χρησιμοποιήσετε το Flexbox Playground
- Ορίστε το flex-direction, wrap, justify-content, align-items, align-content και gap του container.
- Προσθέστε ή αφαιρέστε στοιχεία — μεταξύ 2 και 12 — ώστε να αντικατοπτρίζουν το πραγματικό σας component.
- Κάντε κλικ σε ένα στοιχείο και ρυθμίστε το grow, shrink, basis, align-self και order του.
- Παρακολουθήστε τη ζωντανή προεπισκόπηση να ενημερώνεται με κάθε αλλαγή.
- Αντιγράψτε το παραγόμενο CSS και επικολλήστε το στο project σας.