Μετάβαση στο κύριο περιεχόμενο
LibraTool logoLibraTool

Γεννήτρια CSS Flexbox δωρεάν

Πειραματιστείτε με κατεύθυνση flex, wrap, justify και align σε ζωντανά στοιχεία — και αντιγράψτε το CSS.

Λειτουργεί εκτός σύνδεσης μόλις φορτωθεί
Προσυντάξεις

Συμβουλή: κάντε κλικ σε ένα στοιχείο στην προεπισκόπηση για να ενεργοποιήσετε το flex-grow: 1 σε αυτό.

Ζωντανή προεπισκόπηση
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 Τα πάντα εκτελούνται στο πρόγραμμα περιήγησής σας — δεν φορτώνεται τίποτα.

Πώς λειτουργεί

Ένας διαδραστικός χώρος πειραματισμού flexbox: αλλάξτε flex-direction, wrap, justify-content και align-items και δείτε έως 10 ζωντανά στοιχεία να αναδιατάσσονται αμέσως. Κάντε κλικ σε οποιοδήποτε στοιχείο για να του δώσετε flex-grow: 1 και δείτε πώς διεκδικεί χώρο. Το CSS ενημερώνεται ζωντανά, έτοιμο για αντιγραφή στο project σας.

  1. 1
    Ρυθμίστε το container
    Κατεύθυνση, αναδίπλωση, justify-content, align-items, gap.
  2. 2
    Προσθέστε στοιχεία
    Ένα έως δέκα αριθμημένα στοιχεία flex.
  3. 3
    Πειραματιστείτε
    Κάντε κλικ σε ένα στοιχείο για εναλλαγή του flex-grow και δείτε το αποτέλεσμα.
  4. 4
    Αντιγράψτε το CSS
    Οι κανόνες container (και στοιχείων), έτοιμοι για επικόλληση.

Όλα εκτελούνται στον browser σας — τίποτα δεν μεταφορτώνεται.

Σχετικά εργαλεία

🟦

Γεννήτρια CSS Grid

Σχεδιάστε οπτικά ένα CSS grid — tracks, units και gaps — και αντιγράψτε το generated CSS και HTML.

Δοκιμάστε το
🌈

Γεννήτρια Διαβαθμίσεων CSS

Δημιουργήστε γραμμικές, ακτινικές και κωνικές διαβαθμίσεις CSS με ζωντανή προεπισκόπηση. Αντιγράψτε το CSS με ένα κλικ.

Δοκιμάστε το
🎨

Γεννήτρια Box Shadow CSS

Οπτικός κατασκευαστής CSS box-shadow με ζωντανή προεπισκόπηση, στοίβαξη πολλαπλών επιπέδων, επιλογέα χρωμάτων, εναλλαγή inset και αντιγραφή με ένα κλικ. Περιλαμβάνει προεπιλογές Material, neumorphism και glow.

Δοκιμάστε το

Συχνές ερωτήσεις