Γεννήτρια Flexbox και CSS Grid

Πώς να χρησιμοποιήσετε το εργαστήριο flexbox και grid

1. Επιλέξτε μια Διάταξη: Flexbox ή Grid ή ξεκινήστε από μία από τις Προεπιλογές (Κεντραρισμένο, Γραμμή πλοήγησης, Κάρτες με αναδίπλωση, Πλαϊνή στήλη, Προσαρμοστικό πλέγμα καρτών, Holy grail, 12 στήλες).
2. Ορίστε τις ιδιότητες του Περιέκτης. Για το flexbox: flex-direction και flex-wrap. Για το grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items και grid-template-areas. Και τα δύο έχουν κοινά τα justify-content, align-items, align-content, row-gap (px) και column-gap (px).
3. Διαχειριστείτε τα Στοιχεία με τα Προσθήκη στοιχείου, Αφαίρεση επιλεγμένου στοιχείου και Επαναφορά επιλεγμένου στοιχείου. Κάντε κλικ σε ένα στοιχείο της προεπισκόπησης (ή μεταβείτε σε αυτό με το Tab και πατήστε Enter) για να το επιλέξετε.
4. Επεξεργαστείτε το επιλεγμένο στοιχείο: order και align-self και στους δύο τρόπους, flex-grow, flex-shrink και flex-basis για το flexbox και grid-area, grid-column, grid-row και justify-self για το grid.
5. Αντιγράψτε τον Κώδικας CSS και τον αντίστοιχο Κώδικας HTML με τα κουμπιά Αντιγραφή.

Κάθε στοιχείο ελέγχου είναι τυπικό πεδίο φόρμας, οπότε ολόκληρο το εργαστήριο λειτουργεί μόνο με το πληκτρολόγιο. Το CSS περιέχει μόνο τις ιδιότητες που αλλάξατε σε σχέση με τις προεπιλογές, κάτι που το κρατά σύντομο, και τα στοιχεία με ίδιες ρυθμίσεις μοιράζονται έναν κανόνα (.item όταν ταιριάζουν όλα).

Το flexbox με λίγα λόγια

Το flexbox τακτοποιεί τα στοιχεία κατά μήκος ενός άξονα. Το flex-direction ορίζει τον κύριο άξονα (σειρά ή στήλη)· το justify-content κατανέμει τα στοιχεία κατά μήκος του (center, space-between…) και το align-items τα τοποθετεί στον εγκάρσιο άξονα. Με flex-wrap: wrap, τα στοιχεία που δεν χωρούν περνούν σε νέα γραμμή και το align-content αραιώνει τότε αυτές τις γραμμές.

Κάθε στοιχείο έχει τρεις ιδιότητες μεγέθους, που συνήθως γράφονται μαζί ως flex:

• flex-basis: το αρχικό μέγεθος (το auto χρησιμοποιεί το περιεχόμενο ή το width)·
• flex-grow: πόσο από τον ελεύθερο χώρο παίρνει το στοιχείο (0 = καθόλου, 1 = ίσο μερίδιο)·
• flex-shrink: πόσο υποχωρεί όταν λείπει χώρος (0 = δεν συρρικνώνεται ποτέ).

Η προεπιλογή Πλαϊνή στήλη δείχνει το κλασικό μοτίβο: μια πλαϊνή στήλη με flex-basis: 200px και flex-shrink: 0 και μια κύρια περιοχή με flex-grow: 1.

Το CSS Grid με λίγα λόγια

Το grid τακτοποιεί τα στοιχεία σε δύο διαστάσεις. Το grid-template-columns: repeat(3, 1fr) δημιουργεί τρεις ίσες στήλες· το fr είναι μερίδιο του ελεύθερου χώρου. Το repeat(auto-fill, minmax(120px, 1fr)) δημιουργεί όσες στήλες των τουλάχιστον 120px χωρούν, κάτι που φτιάχνει ένα προσαρμοστικό πλέγμα καρτών χωρίς κανένα media query.

Τα στοιχεία γεμίζουν τα κελιά με τη σειρά, εκτός αν τα τοποθετήσετε εσείς: το grid-column: span 2 κάνει ένα στοιχείο πλάτους δύο στηλών και το grid-column: 1 / -1 το τεντώνει σε ολόκληρη τη σειρά.

Το grid-template-areas σας επιτρέπει να σχεδιάσετε τη διάταξη με ονόματα. Πληκτρολογήστε μία σειρά ανά γραμμή, για παράδειγμα header header και μετά nav main, και δώστε στα στοιχεία grid-area: header ή grid-area: main. Μια τελεία σημαίνει κενό κελί. Κάθε σειρά χρειάζεται τον ίδιο αριθμό κελιών και κάθε όνομα πρέπει να σχηματίζει ορθογώνιο· αλλιώς το εργαλείο σας προειδοποιεί.