Γεννήτρια Flexbox
Ρυθμίστε έναν περιέκτη flex και τα στοιχεία του με οπτικά χειριστήρια, δείτε τη διάταξη να αντιδρά ζωντανά και αντιγράψτε το CSS με ένα κλικ.
Η διάταξή σας δημιουργείται απευθείας στον περιηγητή σας. Καμία από τις ρυθμίσεις σας δεν μεταφορτώνεται στο BroBroGo.
Συχνές Ερωτήσεις
Ποια είναι η διαφορά μεταξύ justify-content και align-items;
Η ιδιότητα justify-content κατανέμει τα στοιχεία κατά μήκος του κύριου άξονα (main axis) — δηλαδή της κατεύθυνσης ροής της σειράς ή της στήλης — ενώ η align-items τα τοποθετεί κατά μήκος του δευτερεύοντος άξονα (cross axis). Αν αλλάξετε την κατεύθυνση από row σε column, οι δύο άξονες αντιμετατίθενται, οπότε το justify-content λειτουργεί από πάνω προς τα κάτω και το align-items από αριστερά προς τα δεξιά.
Πώς λειτουργούν τα στοιχεία ελέγχου ανά αντικείμενο;
Επιλέξτε ένα στοιχείο με βάση τον αριθμό του και, στη συνέχεια, ορίστε πόσο θα μεγαλώνει (grow) για να γεμίσει τον ελεύθερο χώρο, πόσο θα μικραίνει (shrink) όταν ο χώρος είναι περιορισμένος, το αρχικό του μέγεθος (basis) και τη δική του ευθυγράμμιση στον δευτερεύοντα άξονα (align-self). Η ιδιότητα order μετακινεί ένα στοιχείο νωρίτερα ή αργότερα στην οθόνη χωρίς να επηρεάζει τον κώδικα HTML. Μόνο τα στοιχεία που τροποποιείτε αποκτούν δικό τους κανόνα στο παραγόμενο CSS.
Πότε παίζουν ρόλο οι ιδιότητες wrap και align-content;
Με την αναδίπλωση απενεργοποιημένη, όλα τα στοιχεία αναγκάζονται να χωρέσουν σε μία γραμμή και μπορεί να συμπιεστούν. Όταν την ενεργοποιείτε, τα στοιχεία που δεν χωράνε πλέον μεταφέρονται στην επόμενη γραμμή — τότε αναλαμβάνει η ιδιότητα align-content, ρυθμίζοντας τα κενά μεταξύ των γραμμών ως σύνολο. Η ιδιότητα gap ορίζει την απόσταση μεταξύ των στοιχείων και μεταξύ των γραμμών, χωρίς τη χρήση margins.