Γεννήτρια Flexbox

Πειραματιστείτε με την κατεύθυνση κάμψης, τυλίξτε, αιτιολογήστε και ευθυγραμμίστε. Παρακολουθήστε τις διατάξεις των στοιχείων που ενημερώνονται ζωντανά και, στη συνέχεια, αντιγράψτε το κοντέινερ CSS.

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

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

Πώς να χρησιμοποιήσεις

Ρυθμίστε την κατεύθυνση κάμψης και τυλίξτε.
Προσαρμόστε το justify-content και στοίχιση στοιχείων.
Αντιγράψτε το Flexbox CSS.

How this tool works

Ρυθμίστε την κατεύθυνση κάμψης και τυλίξτε.
Προσαρμόστε το justify-content και στοίχιση στοιχείων.
Αντιγράψτε το Flexbox CSS.

Recommended settings

Χρησιμοποιήστε πρώτα τις προεπιλεγμένες επιλογές και μετά προσαρμόστε εάν χρειάζεται

Supported formats

Text / on-page input

File size and limits

Οι πολύ περίπλοκες προεπισκοπήσεις πολλαπλών επιπέδων ενδέχεται να είναι πιο αργές σε παλαιότερα τηλέφωνα.

Privacy

Οι γεννήτριες χρωμάτων και CSS εκτελούνται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας. Οι προεπισκοπήσεις και οι μετατροπές δεν ανεβάζουν ποτέ τα στυλ σας.

Common use cases

Χρησιμοποιήστε το Flexbox Generator όποτε χρειάζεστε: Πειραματιστείτε με την κατεύθυνση flex, τυλίξτε, αιτιολογήστε και ευθυγραμμίστε — δείτε ζωντανά την ενημέρωση των διατάξεων.

Troubleshooting

Η προεπισκόπηση φαίνεται διαφορετική μετά την επικόλληση

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

FAQ

Αυτό ανεβάζει το CSS μου;

Όχι. Οι γεννήτριες και οι μετατροπείς εκτελούνται στο πρόγραμμα περιήγησής σας με ζωντανή προεπισκόπηση.

Χρειάζομαι λογαριασμό;

Όχι. Ανοίξτε το εργαλείο, τροποποιήστε τα στοιχεία ελέγχου και αντιγράψτε το CSS.