Γεννήτρια (FlexBox) Δομής
Πεδίο Ζωντανής Προεπισκόπησης (Live Preview - Box)
Γιατί να χρησιμοποιήσετε μία (Visual) Γεννήτρια για τo Flexbox-CSS;
Όντας, μακράν η πιο πολυσύνθετη και επαναστατική προσθήκη της 10ετιας στο UI Design; Το (Flexbox), διαθέτει αμέτρητες ιδιότητες (properties), οι οποίες αλληλοεπιδρούν μεταξύ τους δημιουργώντας χαός (confusion) στον developer/σχεδιαστή (justify vs align?!). Ο 'Οπτικός Σχεδιαστής/Visual Generator' μας, εξαλείφει ΟΛΟ το... «Μαντάτεμα». Απευθείας, με τα αναπτυσσόμενα μενού και τις ράγες (Slider bars), θα δείτε σε ζωντανό χρόνο τι ΑΚΡΙΒΩΣ ΠΑΘΑΙΝΟΥΝ τα Κουτάκια/Components.
Ζωντανές Αλλαγές (Real-time Preview) - Τέλος στη.. Μαντεψιά!
Δέιτε ΑΚΡΙΒΩΣ τις μαθηματικές επιπτώσεις του layout σε ΚΑΘΕΑΛΛΑΓΗ ΠΑΡΑΜΕΤΡΟΥ—(Τέρμα 'Αποθήκευση.. Refresh browser... Oops, έσπασε').
Απόλυτος Έλεγχος Στα Settings (Comprehensive toolkit)
Επιλογές για flex-direction, justify-content, align-items, flex-wrap, & 'gap'—τα πάντα συγκεντρωμένα μέσα σε έναν χώρο, κάτω από την ομπρέλα του flex.
Έτοιμος / Πεντακάθαρος CSS Κώδικας
Αντιγράψτε με 1 'Click' την τελική τάξη (`.container { ... }` / `.item{...}`) απευθείας προς τα δικά σας Styled components/CSS Files!
Χτίστε, Ένα Πλήρες / Responsive Flexbox μέσα σε (3 βήματα)!
Κατεύθυνση (Direction) // Αλλαγή Γραμμής (Wrap)
Δηλώστε 'Σειρά - Row' / 'Στήλη - Column' (direction), υποδηλώνοντας τον 'Άξονα' σας! Ενεργοποιήστε (wrap) αν θέλετε τα στοιχεία να βγάζουν (line-break / Enter).
Στοίχιση & Κατανομή Στοιχείων (Alignment - Distrobution Box)
Διαλέξτε/Πειράξτε τις (justify-content // align-items) για να μετακινήσετε τα κουτιά (start/center/end / space-between!).
Αντιγραφή - C-S-S (And u are Done..)
Κάντε 'Κλικ' στο κουμπάκι 'Αντιγραφή - CSS'. Tο Snippet ειναι Τελειοποιημένο (Bullet-Proof) και 100% Συμβατό με κάθε Web browser!
Τι.. ('Σκοτώνει'), Κάνοντας Χρήση CSS Flexbox;
Κεντρικά Μενού (Navigation Bars / Header Navs)
Tα Navgation bar, αποτελούν τη N° 1/Top-1 επιτυχία του Flex! [ π.χ. `justifyContent:space-between` => 'Λογότυπο (Left)' vs 'Menu-Links (Right)' ].
Δυναμικά - Grid Καρτών / Προϊόντων (Eshop)
Bάζοντας τον κανόνα `flex-wrap: wrap`.. και μια `min-width` στις Κάρτες.. Εχετε το τέλειο Response-Grid... χωρίς ΚΑΝ ΧΡΗΣΗ 'Media Queries' !
Λύση Στο (Άλυτο) Μυστήριο: 'Vertical - Horizontal 'Κεντράρισμα'
Tέρμα στα Tables / Floats / Margin auto; // 'Δυο' σειρές Flex `justifyContent:center` + `alignItems:center` — Κεντράρουν ΤΑ ΠΑΝΤΑ (Και vertical / Horizontal) !!
Πανέμορφες CSS Φόρμες
Τώρα, το Κουμπι του Input, και το πεδίο, είναι 100% Συμμετρικά 'Align', με τέλειο height - 'stretch'.
Χρυσά Flexbox-CSS 'Κόλπα' και 'Συμβουλές'
✓ Το (ΜΕΓΑ) Κλειδί: 'Κεντρικός' & 'Διαγώνιος - Εγκάρσιος' Άξονας! (Main vs Cross)
Τo `justify-content` ΕΛΕΓΧΕΙ ΠΑΝΤΑ Το 'Main axis/Κεντρικο αξονα/X'. (Στη Σειρά - Row). To `align-items` ελεγχει τo 'Cross Axis - (Y)'. ΟΤΑΝ ΓΥΡΙΣΕΤΕ το format σε "flex-direction: column (Στήλη)" —> Οι Άξονες, και τα.. μαγικά, ΑΛΛΑΖΟΥΝ ΘΕΣΕΙΣ (Reversed)!
✓ (Flex:1 / Grow) : Oι 'Οδηγοί Αδηφαγίας'!!
Αν σε ένα στοιχείο ('παιδί / item'), Βάλετε 'flex: 1'. Τότε θα συμπεριφερθεί σαν Σφουγγάρι.. θα ρουφήξει /Απλωθεί 'Stretch', σε ΟΛΟ ΤΟ ΔΙΑΘΕΣΙΜΟ ΚΕΝΟ του Container!
✓ Πετάξτε το.. (Margin L/R), Αγαπήστε το... (GAP: 2rem;) !!
Το -gap- ειναι Ιεροτελεστία... Δημιουργεί σταθερές (Spacing) αποστάσεις μεταξύ των -flex- κουτιών (Αναμεσα τους).. ΧΩΡΙΣ ΝΑ Ζημιώνει / σπρώχνει τα ακριανά/Εξωτερικά κουτιά έξω απο το Padding του Page/Container!!
✓ Μήπως... Ψαχνατε για 'Grid' αντί για 'Flex' Layouts;
Flexbox (εξ' ορισμού ) ελέγχει 1 'Μόνο' διάσταση (1 Dimension - Μια Σειρά ή μια Στήλη). Για.. Σκακιέρες 2Δ-Διαστασεων (Γραμμές + Κολώνες/2D), Το 'CSS Grid' - είναι το Εργαλείο.!
❓ Συνήθεις Ερωτήσεις (FAQ)
Ποιά είναι η χαώδης Διαφορά.. ('CSS Flexbox vs CSS Grid') ?? Ποιο και Πότε..;;
Το Flexbox θεωρείται / Φτιάχτηκε για.. «1Δ-Μονοδιάστατη - 1D» Σχεδίαση. 'Ητοι: Πετάτε Τα στοιχεία σε γραμμή (Navbar / Buttons), Η στήλη, κι αφήνετε τον browser να βρει χώρο! Το CSS GRID: Σχεδιάστηκε για (2D- Δισδιάστατο - Rows+Columns Layout). Το δουλεύετε όταν θέλετε ΑΥΣΤΗΡΑ προκαθορισμένο Ύψος/Πλάτος και συντεταγμένες σε ολοκληρη 'Σελίδα / Page Structure'!
To 'Flex-Wrap: Wrap' - Σε τι εξυπηρετεί;
Default Συμπεριφορά; Αν Πετάξετε 50 κουτιά των 500px, TO FLEXBOX ΘΑ ΤΑ ΣΥΜΠΙΕΣΕΙ ΜΕ ΤΟ ΖΟΡΙ ΣΕ ΜΙΑ ΓΡΑΜΜΗ !! (Φτιάχνοντας τα.. μια απαίσια / σπασμένη σούπα!). Αν του πείτε `flex-wrap: wrap`... Τότε εάν κολλήσει στον 'τοίχο' (Border), το επόμενο κουτάκι πάει, από-κάτω, καθαρίζοντας για Smartphone UI!
Μπερδεύομαι μεταξύ του... 'align-items' και του 'align-content'...
Mη νιώθετε άσχημα (Ολοι οι Devs το αναζητάν στο Google).. Το `align-items` Εφαρμόζει την Στοίχιση ΣΕ ΚΑΘΕ 1 (Ξεχωριστή) Γραμμή-Σειρά! Αντίθετα, το `align-content` (λειτουργεί ΜΟΝΟ ΑΝ εχετε 'Φlex-Wrap'+πολλες Σειρές).. και ελέγχει ΟΛΟΚΛΗΡΟ τον 'Ογκο των Σειρών'.. σαν ένα (Μεμονωμένο Πακέτο/Bundle) μέσα στο Main Container!
Πώς Δημιουργώ / Μοιράζω ΑΚΡΙΒΩΣ τον ίδιο Χώρο σε (Π.χ. 3 Στήλες);
Στο κάθε (Child item / div), δώστε απλά... `flex: 1`.. Το Flex Engine.. θα τα μοιράσει Δίκαια! Αν τώρα, θέλετε Αυστηρά-Προτεσταντικά Κουτιά 33.3%, Πρέπει να πείτε: `flex: 0 0 33.333%` !! (Δηλαδή: Μη Μεγαλώσεις-(0), Μην Μικρύνεις-(0)... Συμπεριφέρσου σαν (Base Size = 33.33%!).