Τι είναι το CSS Flexbox;
Το CSS Flexbox (Flexible Box Layout) είναι ένα μονοδιάστατο μοντέλο διάταξης για τη διανομή χώρου και την ευθυγράμμιση στοιχείων σε μια γραμμή ή στήλη. Το flex κοντέινερ ορίζεται με display: flex και τα άμεσα παιδιά του γίνονται flex στοιχεία. Βασικές ιδιότητες κοντέινερ: flex-direction (γραμμή ή στήλη), flex-wrap (μονή vs. πολλαπλές γραμμές), justify-content (ευθυγράμμιση κύριου άξονα), align-items (ευθυγράμμιση εγκάρσιου άξονα ανά γραμμή) και align-content (ευθυγράμμιση εγκάρσιου άξονα πολλαπλών γραμμών). Βασικές ιδιότητες στοιχείου: flex-grow (πόσο μεγαλώνει ένα στοιχείο), flex-shrink (πόσο συρρικνώνεται), flex-basis (αρχικό μέγεθος) και align-self (παρακάμπτει το align-items του κοντέινερ για συγκεκριμένο στοιχείο). Το Flexbox είναι ιδανικό για γραμμές πλοήγησης, σειρές καρτών, κεντραρισμένες διατάξεις και κάθε μονοδιάστατη διάταξη.
Πώς να χρησιμοποιήσετε τη Γεννήτρια CSS Flexbox
-
Ρυθμίστε τις ιδιότητες κοντέινερ (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) χρησιμοποιώντας τα αναπτυσσόμενα μενού και το πεδίο εισαγωγής.
-
Κάντε κλικ σε οποιοδήποτε στοιχείο στην προεπισκόπηση για να το επιλέξετε (γίνεται πορτοκαλί).
-
Ορίστε flex-grow, flex-shrink, flex-basis και align-self του επιλεγμένου στοιχείου στον πίνακα στοιχείου.
-
Κάντε κλικ στο '+ Προσθήκη στοιχείου' για να προσθέσετε περισσότερα στοιχεία· κάντε κλικ στο 'Αφαίρεση' για να διαγράψετε το επιλεγμένο στοιχείο.
-
Εναλλάσσετε μεταξύ καρτελών CSS και HTML για να δείτε τον παραγόμενο κώδικα, και στη συνέχεια κάντε κλικ στο Αντιγραφή.
-
Κάντε κλικ στο 'Επαναφορά όλων' για να ξεκινήσετε από την αρχή με την προεπιλεγμένη διάταξη 3 στοιχείων.