Οριζόντιο μενού flexbox. Χρήση του Flexbox στο CSS3 για Responsive Design
Σε αυτό το τεύχος θα κάνουμε οριζόντιο μενού με εφέσε αιώρηση. Ας συνδέσουμε εικονίδια γραμματοσειρών, ενεργοποιούμε τη λειτουργία ανάμειξης επιπέδων χρησιμοποιώντας τη λειτουργία mix-blend-mode: πολλαπλασιάζουμε, χρησιμοποιούμε τις ψευδο-κλάσεις :hover και εξοικειώνουμε με το desplay:flax, όλα γίνονται σε καθαρό CSS3.
Μενού wireframe σε HTML
Κατεβάστε το αρχείο στον υπολογιστή σας και αποσυμπιέστε το. Περιέχει τρεις φακέλους, css όπου βρίσκονται τα αρχεία στυλ, φάκελο γραμματοσειρών με εικονίδια, img είναι μια εικόνα για το φόντο.
Μεταφέρετε τα πάντα στο περιβάλλον ανάπτυξης όπου εργάζεστε. Θα γράψω όλο τον κώδικα σε phpstorm. Αντιγράφω όλους τους φακέλους και τα αρχεία σε αυτό, ανοίγω το index.html και ας αρχίσουμε να περιγράφουμε το πλαίσιο μενού.
Γράφουμε την ετικέτα σώματος
Div.dws-menu>ul.dws-ul>li.dws-li*5>a>i.fa.fa-
Όνομα εικονιδίου:
- καλάθι αγορών
- υπηρέτης
- φάκελος ανοιχτός
- εφημερίδα-ο
Στυλ CSS
Αφού κάνουμε τη σήμανση, προχωράμε στο styling. Ανοίξτε το style.css στο σώμα και ορίστε το φόντο και τη γραμματοσειρά Verdana.
Body( background-image: url("../img/escheresque_ste.png"); font-family: Verdana; )
Δίνουμε φόντο στο μπλοκ με το μενού και κάνουμε εσοχή στην κορυφή κατά 100 pixel. και πλάτος για να γεμίσει ολόκληρη την οθόνη.
Μενού Dws (χρώμα φόντου: λευκό, περιθώριο κορυφής: 100 εικονοστοιχεία, πλάτος: 100%; )
Στα μπλοκ Ul, ευθυγραμμίζουμε τις λίστες οριζόντια χρησιμοποιώντας το desplay:flax, αφαιρούμε το padding και κεντράρουμε τα στοιχεία μας χρησιμοποιώντας το justify-content:center .
Ul.dws-ul( οθόνη: flex; padding: 0; justify-content: center; )
Αφαιρούμε τον δείκτη από τις λίστες LI και τους κάνουμε εσοχή σε όλες τις πλευρές κατά 10 κορυφές.
Li.dws-li (στυλ λίστας: κανένα; padding: 10px; )
Αφαιρέστε την υπογράμμιση από τους συνδέσμους και αυξήστε το κείμενο στα 18 pixel. και να το κάνεις μαύρο.
Li.dws-li a( κείμενο-διακόσμηση: κανένα; μέγεθος γραμματοσειράς: 18 px; χρώμα: #000; )
Μετακινήστε το εικονίδιο λίγο προς τα δεξιά χρησιμοποιώντας margin-right:10px .
Li.dws-li a i(περιθώριο-δεξιά: 10px;)
Κινούμενα σχέδια με αιώρηση
Αφού ολοκληρώσουμε τη βασική σχεδίαση, ας περάσουμε στην κινούμενη εικόνα.
Ας δημιουργήσουμε επιπλέον ψευδοστοιχεία που θα επισημαίνουν το όνομα του στοιχείου όταν τοποθετείται το δείκτη του ποντικιού.
Ας περιγράψουμε την αριστερή πλευρά, επιλέγουμε τους συνδέσμους και τους αντιστοιχίζουμε το ψευδοστοιχείο li.dws-li a::before , γράψτε κενό περιεχόμενο:’’; , πλάτος 20 φωτογραφίες. και ύψος 3 κορυφών. αρκετά. Ας ορίσουμε το χρώμα και για να εμφανιστεί το μπλοκ ορίζουμε θέση: σε σχέση με τους συνδέσμους. , και τοποθετήστε το απολύτως στους συνδέσμους, χαμηλώστε το στο κάτω μέρος, πιέστε το στην αριστερή άκρη.
Li.dws-li a( ... θέση: σχετική; ) li.dws-li a::before( ... θέση: απόλυτη; επάνω: 100%; αριστερά: 0; )
Αντιγράψτε αυτό το μπλοκ και αντιστοιχίστε του το ψευδοστοιχείο ::after. Αλλάξτε την αριστερή παράμετρο προς τα δεξιά, επιλέξτε διαφορετικό χρώμα #ff2117.
Li.dws-li a::after( περιεχόμενο: ""; πλάτος: 20 εικονοστοιχεία; ύψος: 3 εικονοστοιχεία; χρώμα φόντου: #ff2117; θέση: απόλυτη; επάνω: 100%; δεξιά: 0; )
Έπειτα κάνουμε το animation hover. Επιλέξτε το li και δώστε τους ένα ελαφρώς πιο σκούρο φόντο.
Li.dws-li:hover(χρώμα φόντου: #e5eae8; )
Για να το κάνετε αυτό, επιλέξτε τις λίστες στο hover και προσθέστε ένα ψευδοστοιχείο σε αυτές με πλάτος 50% και ορίστε τη μετατροπή κατά μήκος του άξονα X από αριστερά προς τα δεξιά. Αυτό θα της δώσει κίνηση.
Li.dws-li:hover a:before(πλάτος: 50%; μετασχηματισμός: translateX(100%); )
Θα επαναλάβουμε το ίδιο πράγμα για το :: after pseudo-στοιχείο, μόνο τώρα θα ρυθμίσουμε την κίνηση από τα δεξιά προς τα αριστερά.
Li.dws-li:hover a:after(πλάτος: 50%; μετασχηματισμός: translateX(-100%); )
Li.dws-li a::before( ... μετάβαση: .5s; mix-blend-mode: multiply; ) li.dws-li a::after( ... μετάβαση: .5s; mix-blend-mode : πολλαπλασιάζω;)
Αποδείχθηκε πολύ καλό, ας θέσουμε τώρα το πλάτος στο μηδέν και ας προσθέσουμε κόκκινο χρώμα όταν τοποθετούμε τον σύνδεσμο.
Li.dws-li a:hover(χρώμα: #e62117; )
Li.dws-li a( ... padding: 5px; ) li.dws-li a::before( ... top: 90%; ) li.dws-li a::after( ... top: 90 %;)
Βασικά, σας έδειξα τι ήθελα και αποδείχτηκε ένα πολύ ωραίο μενού.
Το μάθημα προετοιμάστηκε από τον Denis Gorelov.
Με λίγα λόγια, η διάταξη Flexbox μας δίνει απλές λύσεις σε κάποτε δύσκολα προβλήματα. Για παράδειγμα, όταν πρέπει να ευθυγραμμίσετε ένα στοιχείο κατακόρυφα ή να πατήσετε το υποσέλιδο στο κάτω μέρος της οθόνης ή απλά να εισαγάγετε πολλά μπλοκ σε μια σειρά, ώστε να καταλαμβάνουν όλο τον ελεύθερο χώρο. Παρόμοια προβλήματα μπορούν να λυθούν χωρίς ευκαμψία. Αλλά κατά κανόνα, αυτές οι λύσεις μοιάζουν περισσότερο με «δεκανίκια» - τεχνικές για τη χρήση CSS για σκοπούς άλλους από τον προορισμό τους. Ενώ με το flexbox τέτοιες εργασίες επιλύονται ακριβώς όπως προορίζεται για το μοντέλο flex.
CSS Flexible Box Layout Module (μονάδα CSS για διατάξεις με ευέλικτα μπλοκ), flexbox για συντομία, δημιουργήθηκε για να εξαλείψει τις ελλείψεις κατά τη δημιουργία μιας μεγάλης ποικιλίας σχεδίων HTML, συμπεριλαμβανομένων εκείνων που είναι προσαρμοσμένα σε διαφορετικά πλάτη και ύψη, και να κάνει τη διάταξη λογική και απλή . Και μια λογική προσέγγιση, κατά κανόνα, λειτουργεί σε απροσδόκητα μέρη, όπου το αποτέλεσμα δεν έχει ελεγχθεί - η λογική είναι το παν!
Το Flexbox σάς επιτρέπει να ελέγχετε κομψά μια ποικιλία παραμέτρων στοιχείων μέσα σε ένα δοχείο: κατεύθυνση, σειρά, πλάτος, ύψος, ευθυγράμμιση κατά μήκος και κατά μήκος, κατανομή ελεύθερου χώρου, τέντωμα και συμπίεση στοιχείων.
ΒΑΣΙΚΕΣ ΓΝΩΣΕΙΣ
Ένα FlexBox αποτελείται από ένα κοντέινερ και τα στοιχεία του (ευέλικτα στοιχεία).
Για να ενεργοποιήσετε το flexbox, οποιοδήποτε στοιχείο HTML πρέπει απλώς να εκχωρήσει την ιδιότητα CSS display:flex; ή εμφάνιση: inline-flex; .
Μετά την ενεργοποίηση της ιδιότητας flex, δημιουργούνται δύο άξονες μέσα στο δοχείο: κύριος και εγκάρσιος (κάθετος (⊥), εγκάρσιος άξονας). Όλα τα ένθετα στοιχεία (του πρώτου επιπέδου) παρατάσσονται κατά μήκος του κύριου άξονα. Από προεπιλογή, ο κύριος άξονας είναι οριζόντιος και κατευθύνεται από αριστερά προς τα δεξιά (→), και ο εγκάρσιος άξονας είναι αντίστοιχα κάθετος και κατευθύνεται από πάνω προς τα κάτω (↓).
Ο κύριος και ο εγκάρσιος άξονες μπορούν να εναλλάσσονται, τότε τα στοιχεία θα βρίσκονται από πάνω προς τα κάτω (↓) και όταν δεν χωρούν πλέον σε ύψος, θα μετακινούνται από αριστερά προς τα δεξιά (→) - δηλαδή, οι άξονες απλώς αλλάζουν θέσεις . Σε αυτή την περίπτωση, η αρχή και το τέλος της διάταξης των στοιχείων δεν αλλάζουν - αλλάζουν μόνο οι κατευθύνσεις (άξονες)! Αυτός είναι ο λόγος για τον οποίο πρέπει να φανταστείτε τα τσεκούρια μέσα στο δοχείο. Ωστόσο, δεν πρέπει να πιστεύει κανείς ότι υπάρχουν κάποιοι «φυσικοί» άξονες και επηρεάζουν κάτι. Ο άξονας εδώ είναι απλώς η κατεύθυνση κίνησης των στοιχείων μέσα στο δοχείο. Για παράδειγμα, αν καθορίσαμε την ευθυγράμμιση των στοιχείων στο κέντρο του κύριου άξονα και μετά αλλάξαμε την κατεύθυνση αυτού του κύριου άξονα, τότε η ευθυγράμμιση θα αλλάξει: τα στοιχεία ήταν στη μέση οριζόντια, αλλά έγιναν στη μέση κατακόρυφα... Δείτε το παράδειγμα.
Ένα άλλο σημαντικό χαρακτηριστικό του Flexbox είναι η παρουσία σειρών στην εγκάρσια κατεύθυνση. Για να καταλάβουμε τι μιλάμε, ας φανταστούμε ότι υπάρχει ένας κύριος οριζόντιος άξονας, υπάρχουν πολλά στοιχεία και δεν «ταιριάζουν» στο δοχείο, οπότε μετακινούνται σε άλλη σειρά. Εκείνοι. ένα δοχείο μοιάζει με αυτό: ένα δοχείο με δύο σειρές μέσα του, κάθε σειρά περιέχει πολλά στοιχεία. Εισήχθη; Τώρα θυμηθείτε ότι μπορούμε να ευθυγραμμίσουμε κάθετα όχι μόνο στοιχεία, αλλά και σειρές! Το πώς λειτουργεί αυτό φαίνεται ξεκάθαρα στο παράδειγμα για το ακίνητο. Και έτσι φαίνεται σχηματικά:
![](https://i0.wp.com/wp-kama.ru/wp-content/uploads/2017/02/ryady-elementy-kontejnera.png)
Οι ιδιότητες CSS που μπορούν να επηρεάσουν το μοντέλο διάταξης: float, clear, vertical-align, στήλες δεν λειτουργούν σε ευέλικτη σχεδίαση. Εδώ χρησιμοποιείται ένα διαφορετικό μοντέλο για την κατασκευή μιας διάταξης και αυτές οι ιδιότητες CSS απλώς αγνοούνται.
Ιδιότητες Flexbox CSS
Το Flexbox περιέχει διαφορετικούς κανόνες CSS για τον έλεγχο ολόκληρου του flex σχεδίου. Ορισμένα πρέπει να εφαρμοστούν στο κύριο δοχείο και άλλα στα στοιχεία αυτού του δοχείου.
Για δοχείο
απεικόνιση:Ενεργοποιεί την ιδιότητα flex για το στοιχείο. Αυτή η ιδιότητα καλύπτει το ίδιο το στοιχείο και τα ένθετα στοιχεία του: επηρεάζονται μόνο οι απόγονοι πρώτου επιπέδου - θα γίνουν στοιχεία του εύκαμπτου κοντέινερ.
- καλώδιο- το στοιχείο εκτείνεται σε όλο το πλάτος του και έχει τον πλήρη χώρο του ανάμεσα στα γύρω μπλοκ. Οι αλλαγές γραμμής συμβαίνουν στην αρχή και στο τέλος του μπλοκ.
- inline-flex- ένα στοιχείο τυλίγεται γύρω από άλλα στοιχεία. Σε αυτήν την περίπτωση, το εσωτερικό του τμήμα μορφοποιείται ως στοιχείο μπλοκ και το ίδιο το στοιχείο μορφοποιείται ως ενσωματωμένο.
Το flex και το inline-flex διαφέρουν στο ότι αλληλεπιδρούν διαφορετικά με τα γύρω στοιχεία, παρόμοια με το display:block και το display:inline-block .
flex-direction:Αλλάζει την κατεύθυνση του κύριου άξονα του δοχείου. Ο εγκάρσιος άξονας αλλάζει ανάλογα.
- σειρά (προεπιλογή)- κατεύθυνση των στοιχείων από αριστερά προς τα δεξιά (→)
- στήλη- κατεύθυνση των στοιχείων από πάνω προς τα κάτω (↓)
- σειρά-αντίστροφη- κατεύθυνση των στοιχείων από δεξιά προς τα αριστερά (←)
- στήλη-πίσω- κατεύθυνση των στοιχείων από κάτω προς τα πάνω ()
Ελέγχει τη μεταφορά στοιχείων που δεν χωρούν στο δοχείο.
- nowrap (προεπιλογή)- τα ένθετα στοιχεία τοποθετούνται σε μία σειρά (με κατεύθυνση=σειρά) ή σε μία στήλη (με κατεύθυνση=στήλη) ανεξάρτητα από το αν ταιριάζουν στο δοχείο ή όχι.
- κάλυμμα- περιλαμβάνει κινούμενα στοιχεία στην επόμενη σειρά εάν δεν χωρούν στο δοχείο. Αυτό επιτρέπει την κίνηση των στοιχείων κατά μήκος του εγκάρσιου άξονα.
- τυλίγω-αντίστροφα- το ίδιο με το περιτύλιγμα, μόνο που η μεταφορά δεν θα είναι κάτω, αλλά πάνω (προς την αντίθετη κατεύθυνση).
Συνδυάζει ιδιότητες flex-direction και flex-wrap. Συχνά χρησιμοποιούνται μαζί, επομένως η ιδιότητα flex-flow δημιουργήθηκε για να βοηθήσει στη σύνταξη λιγότερου κώδικα.
Το flex-flow δέχεται τις τιμές αυτών των δύο ιδιοτήτων, που χωρίζονται από ένα διάστημα. Ή μπορείτε να καθορίσετε μια μεμονωμένη τιμή για οποιαδήποτε ιδιότητα.
/* flex-direction only */ flex-flow: row; flex-flow: row-reverse; flex-flow: στήλη; flex-flow: στήλη-αντίστροφη; /* flex-wrap only */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* και οι δύο τιμές ταυτόχρονα: flex-direction και flex-wrap */ flex-flow: row nowrap; flex-flow: περιτύλιγμα στήλης. flex-flow: στήλη-reverse wrap-reverse; justify-content:
Ευθυγραμμίζει στοιχεία κατά μήκος του κύριου άξονα: αν κατεύθυνση=σειρά, τότε οριζόντια και αν κατεύθυνση=στήλη, τότε κατακόρυφα.
- flex-start (προεπιλογή)- τα στοιχεία θα πάνε από την αρχή (ίσως να μείνει λίγος χώρος στο τέλος).
- flex-end- τα στοιχεία είναι ευθυγραμμισμένα στο τέλος (ο χώρος θα παραμείνει στην αρχή)
- κέντρο- στο κέντρο (το κενό θα παραμείνει αριστερά και δεξιά)
- διάστημα-μεταξύ- τα εξωτερικά στοιχεία πιέζονται στις άκρες (ο χώρος μεταξύ των στοιχείων κατανέμεται ομοιόμορφα)
- χώρο-γύρω- Ο ελεύθερος χώρος κατανέμεται ομοιόμορφα μεταξύ των στοιχείων (τα εξωτερικά στοιχεία δεν πιέζονται στις άκρες). Το διάστημα μεταξύ της άκρης του δοχείου και των εξωτερικών στοιχείων θα είναι το μισό από το διάστημα μεταξύ των στοιχείων στη μέση της σειράς.
- χώρο-ομοιόμορφα
Ευθυγραμμίζει τις σειρές που περιέχουν στοιχεία κατά μήκος του εγκάρσιου άξονα. Ίδιο με το justify-content μόνο για τον αντίθετο άξονα.
Σημείωση: Λειτουργεί όταν υπάρχουν τουλάχιστον 2 σειρές, π.χ. Εάν υπάρχει μόνο 1 σειρά, δεν θα συμβεί τίποτα.
Εκείνοι. αν flex-direction: row , τότε αυτή η ιδιότητα θα ευθυγραμμίσει τις αόρατες σειρές κατακόρυφα. Είναι σημαντικό να σημειωθεί εδώ ότι το ύψος του μπλοκ πρέπει να ρυθμιστεί αυστηρά και πρέπει να είναι μεγαλύτερο από το ύψος των σειρών, διαφορετικά οι ίδιες οι σειρές θα τεντώσουν το δοχείο και οποιαδήποτε ευθυγράμμισή τους δεν έχει νόημα, επειδή δεν υπάρχει ελεύθερος χώρος μεταξύ Αλλά όταν flex-direction: στήλη , τότε οι σειρές μετακινούνται οριζόντια → και το πλάτος του κοντέινερ είναι σχεδόν πάντα μεγαλύτερο από το πλάτος των σειρών και η ευθυγράμμιση των σειρών έχει αμέσως νόημα...
- τέντωμα (προεπιλογή)- οι σειρές τεντώνονται για να γεμίσουν πλήρως τη σειρά
- flex-start- οι σειρές ομαδοποιούνται στο επάνω μέρος του κοντέινερ (μπορεί να έχει μείνει λίγος χώρος στο τέλος).
- flex-end- οι σειρές ομαδοποιούνται στο κάτω μέρος του κοντέινερ (το διάστημα θα παραμείνει στην αρχή)
- κέντρο- οι σειρές ομαδοποιούνται στο κέντρο του δοχείου (το κενό θα παραμείνει στις άκρες)
- διάστημα-μεταξύ- οι εξωτερικές σειρές πιέζονται στις άκρες (ο χώρος μεταξύ των σειρών κατανέμεται ομοιόμορφα)
- χώρο-γύρω- Ο ελεύθερος χώρος κατανέμεται ομοιόμορφα μεταξύ των σειρών (τα εξωτερικά στοιχεία δεν πιέζονται στις άκρες). Το διάστημα μεταξύ της άκρης του δοχείου και των εξωτερικών στοιχείων θα είναι το μισό από το διάστημα μεταξύ των στοιχείων στη μέση της σειράς.
- χώρο-ομοιόμορφα- το ίδιο με το διάστημα γύρω, μόνο η απόσταση μεταξύ των εξωτερικών στοιχείων και των άκρων του δοχείου είναι ίδια με εκείνη μεταξύ των στοιχείων.
Ευθυγραμμίζει στοιχεία κατά μήκος ενός εγκάρσιου άξονα μέσα σε μια σειρά (αόρατη σειρά). Εκείνοι. Οι ίδιες οι σειρές ευθυγραμμίζονται μέσω align-content , και τα στοιχεία μέσα σε αυτές τις σειρές (σειρές) ευθυγραμμίζονται μέσω στοιχείων στοίχισης και σε όλο τον εγκάρσιο άξονα. Δεν υπάρχει τέτοια διαίρεση κατά μήκος του κύριου άξονα, δεν υπάρχει η έννοια των σειρών και τα στοιχεία ευθυγραμμίζονται μέσω του justify-content .
- τέντωμα (προεπιλογή)- τα στοιχεία τεντώνονται για να γεμίσουν πλήρως τη γραμμή
- flex-start- τα στοιχεία πιέζονται στην αρχή της σειράς
- flex-end- τα στοιχεία πιέζονται στο τέλος της σειράς
- κέντρο- τα στοιχεία ευθυγραμμίζονται στο κέντρο της σειράς
- γραμμή βάσης- τα στοιχεία ευθυγραμμίζονται με τη γραμμή βάσης του κειμένου
Για στοιχεία δοχείων
flex-grow:Ορίζει τον συντελεστή μεγέθυνσης του στοιχείου όταν υπάρχει ελεύθερος χώρος στο κοντέινερ. Προεπιλογή flex-grow: 0 δηλ. κανένα από τα στοιχεία δεν πρέπει να μεγαλώσει και να γεμίσει τον ελεύθερο χώρο στο δοχείο.
Προεπιλογή flex-grow: 0
- Εάν καθορίσετε flex-grow:1 για όλα τα στοιχεία, τότε θα τεντωθούν όλα εξίσου και θα γεμίσουν όλο τον ελεύθερο χώρο στο δοχείο.
- Εάν καθορίσετε flex-grow:1 σε ένα από τα στοιχεία, τότε θα γεμίσει όλο τον ελεύθερο χώρο στο κοντέινερ και οι ευθυγραμμίσεις μέσω του justify-content δεν θα λειτουργούν πλέον: δεν υπάρχει ελεύθερος χώρος για ευθυγράμμιση...
- Με flex-grow:1. Εάν ένα από αυτά έχει flex-grow:2 τότε θα είναι 2 φορές μεγαλύτερο από όλα τα άλλα
- Εάν όλα τα flex boxes μέσα σε ένα flex δοχείο έχουν flex-grow:3 τότε θα έχουν το ίδιο μέγεθος
- Με flex-grow:3. Εάν ένα από αυτά έχει flex-grow:12 τότε θα είναι 4 φορές μεγαλύτερο από όλα τα άλλα
Πως δουλεύει? Ας υποθέσουμε ότι ένα δοχείο έχει πλάτος 500 px και περιέχει δύο στοιχεία, το καθένα με πλάτος βάσης 100 px. Αυτό σημαίνει ότι απομένουν 300 ελεύθερα pixel στο κοντέινερ. Τώρα, αν καθορίσουμε flex-grow:2; , και το δεύτερο flex-grow: 1; , τότε τα μπλοκ θα καταλαμβάνουν όλο το διαθέσιμο πλάτος του κοντέινερ και το πλάτος του πρώτου μπλοκ θα είναι 300 εικονοστοιχεία και του δεύτερου 200 εικονοστοιχεία. Αυτό εξηγείται από το γεγονός ότι τα διαθέσιμα 300 px ελεύθερου χώρου στο κοντέινερ κατανεμήθηκαν μεταξύ των στοιχείων σε αναλογία 2:1, +200 px για το πρώτο και +100 px για το δεύτερο.
Σημείωση: μπορείτε να καθορίσετε κλασματικούς αριθμούς στην τιμή, για παράδειγμα: 0,5 - flex-grow:0,5
flex-shrink:Ορίζει τον συντελεστή μείωσης του στοιχείου. Η ιδιότητα είναι το αντίθετο της flex-grow και καθορίζει πώς θα συρρικνωθεί το στοιχείο εάν δεν υπάρχει ελεύθερος χώρος στο δοχείο. Εκείνοι. η ιδιότητα αρχίζει να λειτουργεί όταν το άθροισμα των μεγεθών όλων των στοιχείων είναι μεγαλύτερο από το μέγεθος του δοχείου.
Προεπιλεγμένο flex-shrink:1
Ας υποθέσουμε ότι το κοντέινερ έχει πλάτος 600 εικονοστοιχεία και περιέχει δύο στοιχεία, το καθένα πλάτους 300 εικονοστοιχείων - flex-basis:300 px; . Εκείνοι. δύο στοιχεία γεμίζουν πλήρως το δοχείο. Δώστε το πρώτο στοιχείο flex-shrink: 2; , και το δεύτερο flex-shrink: 1; . Τώρα ας μειώσουμε το πλάτος του δοχείου κατά 300 px, δηλ. Τα στοιχεία πρέπει να συρρικνωθούν κατά 300 εικονοστοιχεία για να χωρέσουν μέσα στο δοχείο. Θα συρρικνωθούν σε αναλογία 2:1, δηλ. το πρώτο μπλοκ θα συρρικνωθεί κατά 200 εικονοστοιχεία και το δεύτερο κατά 100 εικονοστοιχεία και τα νέα μεγέθη στοιχείων θα γίνουν 100 εικονοστοιχεία και 200 εικονοστοιχεία.
Σημείωση: μπορείτε να καθορίσετε κλασματικούς αριθμούς στην τιμή, για παράδειγμα: 0,5 - flex-shrink:0,5
flex-based:Ορίζει το πλάτος βάσης του στοιχείου - το πλάτος πριν από τον υπολογισμό άλλων συνθηκών που επηρεάζουν το πλάτος του στοιχείου. Η τιμή μπορεί να καθοριστεί σε px, em, rem, %, vw, vh κ.λπ. Το τελικό πλάτος θα εξαρτηθεί από το πλάτος της βάσης και τις τιμές flex-grow, flex-shrink και το περιεχόμενο μέσα στο μπλοκ. Με το auto, το στοιχείο αποκτά ένα πλάτος βάσης σε σχέση με το περιεχόμενο μέσα σε αυτό.
Προεπιλογή: αυτόματη
Μερικές φορές είναι καλύτερο να ορίσετε το πλάτος ενός στοιχείου σκληρά μέσω της συνήθους ιδιότητας πλάτους. Για παράδειγμα, πλάτος: 50%; θα σημαίνει ότι το στοιχείο μέσα στο δοχείο θα είναι ακριβώς 50%, αλλά οι ιδιότητες flex-grow και flex-shrink θα εξακολουθούν να λειτουργούν. Αυτό μπορεί να είναι απαραίτητο όταν το στοιχείο τεντώνεται από το περιεχόμενο μέσα σε αυτό, περισσότερο από ό,τι καθορίζεται στην ευέλικτη βάση. Παράδειγμα.
Το flex-basis θα είναι "άκαμπτο" εάν το stretch and shrink τεθούν στο μηδέν: flex-basis:200px; flex-grow:0; flex-shrink:0; . Όλα αυτά μπορούν να γραφτούν ως εξής: flex:0 0 200px; .
flex: (αύξηση συρρικνώνεται με βάση)Μια σύντομη περίληψη των τριών ιδιοτήτων: flex-grow flex-shrink flex-basis .
Προεπιλογή: flex: 0 1 αυτόματο
Ωστόσο, μπορείτε να καθορίσετε μία ή δύο τιμές:
Flex: κανένα; /* 0 0 auto */ /* αριθμός */ flex: 2; /* flex-grow (flex-bass πηγαίνει στο 0) */ /* όχι αριθμός */ flex: 10em; /* flex-bases: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* flex-basis: περιεχόμενο */ flex: 1 30px; /* flex-grow and flex-basis */ flex: 2 2; /* flex-grow and flex-shrink (flex-bass πηγαίνει στο 0) */ flex: 2 2 10%; /* flex-grow and flex-shrink and flex-basis */ align-self:
Σας επιτρέπει να αλλάξετε την ιδιότητα στοίχιση στοιχείων, μόνο για ένα μόνο στοιχείο.
Προεπιλογή: από το κοντέινερ στοίχισης στοιχείων
- τέντωμα- το στοιχείο τεντώνεται για να γεμίσει εντελώς τη γραμμή
- flex-start- το στοιχείο πιέζεται στην αρχή της γραμμής
- flex-end- το στοιχείο πιέζεται μέχρι το τέλος της γραμμής
- κέντρο- το στοιχείο είναι ευθυγραμμισμένο στο κέντρο της γραμμής
γραμμή βάσης- το στοιχείο είναι στοιχισμένο στη γραμμή βάσης του κειμένου
Σας επιτρέπει να αλλάξετε τη σειρά (θέση, θέση) ενός στοιχείου στη γενική σειρά.
Προεπιλογή: παραγγελία: 0
Από προεπιλογή, τα στοιχεία έχουν σειρά: 0 και τοποθετούνται με τη σειρά εμφάνισής τους στον κώδικα HTML και την κατεύθυνση της σειράς. Αλλά αν αλλάξετε την τιμή της ιδιότητας παραγγελίας, τότε τα στοιχεία θα ταξινομηθούν με τη σειρά των τιμών: -1 0 1 2 3 ... . Για παράδειγμα, εάν καθορίσετε τη σειρά: 1 για ένα από τα στοιχεία, τότε όλα τα μηδενικά θα πάνε πρώτα και μετά το στοιχείο με 1.
Με αυτόν τον τρόπο, για παράδειγμα, μπορείτε να μετακινήσετε το πρώτο στοιχείο στο τέλος χωρίς να αλλάξετε την κατεύθυνση κίνησης των υπολοίπων στοιχείων ή τον κώδικα HTML.
Σημειώσεις
Ποια είναι η διαφορά μεταξύ ευέλικτης βάσης και πλάτους;
Παρακάτω είναι οι σημαντικές διαφορές μεταξύ flex-base και πλάτους/ύψους:
- Όταν χρησιμοποιείτε την ιδιότητα flex, 3 τιμές (flex-grow/flex-shrink/flex-basis) μπορούν να συνδυαστούν και να γραφτούν εν συντομία, αλλά για την ανάπτυξη ή τη συρρίκνωση του πλάτους πρέπει να γράψετε ξεχωριστά. Για παράδειγμα: flex:0 0 50% == πλάτος:50%; flex-shrink:0; . Μερικές φορές είναι απλώς άβολο.
Το flex-bases λειτουργεί μόνο για τον κύριο άξονα. Αυτό σημαίνει ότι με το flex-direction:row flex-basis ελέγχει το πλάτος και με το flex-direction:column ελέγχει το ύψος. .
Το flex-base ισχύει μόνο για flex στοιχεία. Αυτό σημαίνει ότι εάν απενεργοποιήσετε το flex για ένα κοντέινερ, αυτή η ιδιότητα δεν θα έχει καμία επίδραση.
Τα απόλυτα στοιχεία κοντέινερ δεν συμμετέχουν στην ευέλικτη κατασκευή... Αυτό σημαίνει ότι η εύκαμπτη βάση δεν επηρεάζει τα εύκαμπτα στοιχεία ενός δοχείου εάν είναι απόλυτη θέση:απόλυτη . Θα πρέπει να καθορίσουν πλάτος/ύψος.
Εάν είναι δυνατόν, προτιμήστε ακόμα το flex-based. Χρησιμοποιήστε το πλάτος μόνο όταν η ελαστική βάση δεν είναι κατάλληλη.
Η διαφορά μεταξύ ευέλικτης βάσης και πλάτους - σφάλμα ή χαρακτηριστικό;
Το περιεχόμενο μέσα σε ένα στοιχείο flex το ωθεί και δεν μπορεί να το υπερβεί. Ωστόσο, εάν ορίσετε το πλάτος χρησιμοποιώντας το πλάτος ή το μέγιστο πλάτος αντί για την ευέλικτη βάση , τότε ένα στοιχείο μέσα σε ένα εύκαμπτο κοντέινερ θα μπορεί να εκτείνεται πέρα από τα όρια αυτού του κοντέινερ (μερικές φορές αυτή είναι ακριβώς η συμπεριφορά που θέλετε). Παράδειγμα:
Παραδείγματα ευέλικτης διάταξης
Πουθενά στα παραδείγματα δεν χρησιμοποιούνται προθέματα για συμβατότητα μεταξύ προγραμμάτων περιήγησης. Το έκανα για εύκολη ανάγνωση του css. Επομένως, δείτε τις πιο πρόσφατες εκδόσεις του Chrome ή του Firefox για παραδείγματα.
#1 Απλό παράδειγμα με κάθετη και οριζόντια ευθυγράμμιση
Ας ξεκινήσουμε με το απλούστερο παράδειγμα - κάθετη και οριζόντια ευθυγράμμιση ταυτόχρονα και σε οποιοδήποτε ύψος μπλοκ, ακόμη και από καουτσούκ.
Ή κάπως έτσι, χωρίς μπλοκ μέσα:
#1.2 Διαχωρισμός (σπάσιμο) μεταξύ στοιχείων flex block
Για να τοποθετήσετε στοιχεία κοντέινερ κατά μήκος των άκρων και να επιλέξετε τυχαία ένα στοιχείο μετά το οποίο θα υπάρξει διάλειμμα, πρέπει να χρησιμοποιήσετε την ιδιότητα margin-left:auto ή margin-right:auto.
#2 Προσαρμοστικό μενού στο flex
Ας δημιουργήσουμε ένα μενού στο επάνω μέρος της σελίδας. Σε μια ευρεία οθόνη θα πρέπει να είναι στα δεξιά. Κατά μέσο όρο, ευθυγραμμίστε στη μέση. Και στο μικρό, κάθε στοιχείο πρέπει να είναι σε μια νέα γραμμή.
#3 Προσαρμοστικό 3 στήλες
Αυτό το παράδειγμα δείχνει πώς να φτιάξετε γρήγορα και εύκολα 3 στήλες, οι οποίες, όταν στενέψουν, θα μετατραπούν σε 2 και στη συνέχεια σε 1.
Λάβετε υπόψη ότι αυτό μπορεί να γίνει χωρίς τη χρήση κανόνων πολυμέσων, όλα είναι σε ευελιξία.
Μεταβείτε στο jsfiddle.net και αλλάξτε το πλάτος της ενότητας "αποτέλεσμα".
#4 Προσαρμόσιμα μπλοκ στο flex
Ας υποθέσουμε ότι πρέπει να βγάλουμε 3 μπλοκ, ένα μεγάλο και δύο μικρά. Ταυτόχρονα, είναι απαραίτητο τα μπλοκ να προσαρμόζονται σε μικρές οθόνες. Κανουμε:
Μεταβείτε στο jsfiddle.net και αλλάξτε το πλάτος της ενότητας "αποτέλεσμα".
#5 Γκαλερί με flex και transition
Αυτό το παράδειγμα δείχνει πόσο γρήγορα μπορείτε να φτιάξετε ένα χαριτωμένο ακορντεόν με εικόνες χρησιμοποιώντας flex. Δώστε προσοχή στην ιδιότητα μετάβασης για flex.
#6 Flex to Flex (μόνο ένα παράδειγμα)
Το καθήκον είναι να φτιάξετε ένα ευέλικτο μπλοκ. Έτσι ώστε η αρχή του κειμένου σε κάθε μπλοκ να βρίσκεται στην ίδια γραμμή οριζόντια. Εκείνοι. Καθώς το πλάτος στενεύει, τα μπλοκ μεγαλώνουν σε ύψος. Είναι απαραίτητο η εικόνα να βρίσκεται στο επάνω μέρος, το κουμπί να βρίσκεται πάντα στο κάτω μέρος και το κείμενο στη μέση να ξεκινά κατά μήκος μιας οριζόντιας γραμμής...
Για να λυθεί αυτό το πρόβλημα, τα ίδια τα μπλοκ τεντώνονται με flex και ρυθμίζονται στο μέγιστο δυνατό πλάτος. Κάθε εσωτερικό μπλοκ είναι επίσης μια εύκαμπτη δομή, με έναν περιστρεφόμενο άξονα flex-direction:column; και το στοιχείο στη μέση (όπου είναι το κείμενο) είναι τεντωμένο flex-grow:1; για να γεμίσει όλο τον ελεύθερο χώρο, έτσι επιτυγχάνεται το αποτέλεσμα - το κείμενο ξεκίνησε με μια γραμμή...
Περισσότερα παραδείγματα
Υποστήριξη προγράμματος περιήγησης - 98,3%
Φυσικά, δεν υπάρχει πλήρης υποστήριξη, αλλά όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν σχέδια flexbox. Ορισμένα εξακολουθούν να απαιτούν προθέματα. Για μια πραγματική εικόνα, ας δούμε το caniuse.com και ας δούμε ότι το 96,3% των προγραμμάτων περιήγησης που χρησιμοποιούνται σήμερα θα λειτουργούν χωρίς προθέματα, με το 98,3% να χρησιμοποιεί προθέματα. Αυτός είναι ένας εξαιρετικός δείκτης για να χρησιμοποιείτε με σιγουριά το flexbox.
Για να μάθετε ποια προθέματα είναι σχετικά σήμερα (Ιούνιος 2019), θα δώσω ένα παράδειγμα όλων των κανόνων flex με με τα απαραίτητα προθέματα:
/* Container */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms -flex-flow:column wrap; flex-flow:column wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-line-pack: διανομή; align-content:space-around; ) /* Elements */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- αρνητικό:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; flex:1 2 100px; -ms-flex-item-align :center; align-self:center; -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; )
Είναι καλύτερα οι ιδιότητες με προθέματα να προηγούνται της αρχικής ιδιοκτησίας.
Αυτή η λίστα δεν περιέχει κανένα πρόθεμα που δεν είναι απαραίτητο σήμερα (σύμφωνα με τον caniuse), αλλά γενικά υπάρχουν περισσότερα προθέματα.
Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | I.E. | Android | iOS |
---|---|---|---|---|---|---|
20- (παλιό) | 3,1+ (παλιό) | 2-21 (παλιά) | 10 (τσιμπίδα) | 2,1+ (παλιό) | 3,2+ (παλιό) | |
21+ (νέο) | 6.1+ (νέο) | 22+ (νέο) | 12,1+ (νέο) | 11+ (νέο) | 4,4+ (νέο) | 7.1+ (νέο) |
- (νέο) - νέα σύνταξη: εμφάνιση: flex; .
- (tweener) - παλιά ανεπίσημη σύνταξη από το 2011: οθόνη: flexbox. .
- (παλιά) - παλιά σύνταξη από το 2009: οθόνη: κουτί;
βίντεο
Λοιπόν, μην ξεχνάτε το βίντεο, μερικές φορές είναι επίσης ενδιαφέρον και κατανοητό. Εδώ είναι μερικά από τα δημοφιλή:
Χρήσιμοι σύνδεσμοι στο Flex
flexboxfroggy.com - εκπαιδευτικό παιχνίδι flexbox.
Το Flexplorer είναι ένα πρόγραμμα δημιουργίας οπτικού ευέλικτου κώδικα.
Σε αυτήν την ανάρτηση θέλω να δείξω έναν τρόπο υλοποίησης ενός οριζόντιου μενού με απόκριση χρησιμοποιώντας το Flexbox. Αυτή η μέθοδος υλοποίησης του μενού χρησιμοποιείται στον ιστότοπο Warface Hub, αλλά με ελαφρώς διαφορετική δομή και Οπερισσότερα σφυρίγματα.
Πριν από περίπου ένα χρόνο, βρέθηκα σε μια εταιρεία όπου μου είπαν μια υπέροχη φράση: «Πρώτα κάνουμε τα πάντα χρησιμοποιώντας CSS και μετά προσθέτουμε μόνο JavaScript». Η συμβουλή μου φάνηκε καλή και την ακολούθησα. Αλλά όπως συμβαίνει, παρασύρθηκα. Τώρα μου επανήλθε ότι δεν χρειάζεται να γίνουν όλα με αυτήν την προσέγγιση.
Και έτσι, πιο κοντά στην ουσία. Άρχισα να μελετώ και να εφαρμόζω.
Στόχοι
- αποκτήστε βασικές δεξιότητες στην εργασία με ιδιότητες Flexbox.
- αναπτύξτε ένα οριζόντιο προσαρμοστικό μενού.
- Εφαρμόστε τη λύση που προκύπτει στο έργο.
Εργαλεία και Τεκμηρίωση
- NPM – ως διαχειριστής πακέτων (τώρα μετακινούμαστε ενεργά στο Yarn)
- Το Grunt είναι ένα εργαλείο που θα σας βοηθήσει να φτιάξετε το έργο σας
- Τεκμηρίωση Flexbox (βλ χρήσιμοι σύνδεσμοι);
Δομή
![](https://i2.wp.com/habrastorage.org/files/84c/41a/2db/84c41a2db4fe4e44a64b374a04d5cadb.png)
Για να οργανώσω τη δομή του στυλ για το μενού, χρησιμοποίησα την έννοια που περιγράφηκε. Ο συγγραφέας αυτής της ιδέας προτείνει να χωριστούν όλες οι περιγραφές στυλ σε διάφορα μέρη:
- διάταξη– περιγράφει τη θέση των στοιχείων και των στοιχείων στη σελίδα.
- συστατικό– περιγράφει την εμφάνιση και τη συμπεριφορά των στοιχείων που περιλαμβάνονται στο στοιχείο.
- στοιχείο– περιγράφει την εμφάνιση και τη συμπεριφορά ενός μεμονωμένου στοιχείου.
- Βάση- περιγραφή σταθερών, βασικών στυλ (όπως στο normalize.css)
- Συστατικό- περιγραφή των στοιχείων της εφαρμογής. Στην περίπτωσή μας, το στοιχείο "Μενού".
- Στοιχείο- περιγραφή στυλ για στοιχεία όπως κουμπί, σύνδεσμος κ.λπ.
- Διάταξη- περιγραφή της θέσης των μπλοκ στη σελίδα
- στυλ.scss- σε αυτό το αρχείο θα τα βάλουμε όλα μαζί
Ετικέτες εισαγωγής και ετικέτας CSS και HTML
Πριν ξεκινήσουμε τη σχεδίαση σήμανσης HTML, θα ήθελα να υπενθυμίσω/δείξω ενδιαφέρουσα συμπεριφορά επιλογέων CSS που θα μας είναι χρήσιμη.
Σε αυτό το παράδειγμα, μπορεί να παρατηρήσετε ότι όταν κάνετε κλικ στην ετικέτα θα λάβετε την επιλεγμένη είσοδο. Δεν υπάρχει τίποτα ιδιαίτερο σε αυτό (δείτε), αλλά το πιο ενδιαφέρον πράγμα συμβαίνει στην πλευρά των επιλογέων CSS.
Είσοδος: επιλεγμένο (χρώμα περιγράμματος: κόκκινο; )
Αυτός ο επιλογέας CSS θα υποβληθεί σε επεξεργασία μόνο όταν έχει επιλεγεί η εισαγωγή (δείτε :επιλεγμένο)
Το δεύτερο πράγμα που πρέπει να προσέξετε στους επιλογείς CSS είναι η επιλογή του επόμενου στοιχείου (βλ. Επιλογείς γειτονικών αδερφών και γενικοί επιλογείς αδελφών). Δηλαδή, μπορούμε να επιλέξουμε το επόμενο στοιχείο μετά το τρέχον.
Εισαγωγή:checked + .label (χρώμα: κόκκινο; )
Σε αυτό το παράδειγμα, έχουμε την ακόλουθη συμπεριφορά: όταν επιλέγεται ένα στοιχείο με την κλάση εισόδου, το επόμενο στοιχείο με την κλάση ετικέτας θα αλλάξει σύμφωνα με τα περιγραφόμενα στυλ.
Τώρα όλα αυτά μπορούν να συνδυαστούν μαζί.
Δομή μενού με ένα στοιχείο
Σε αυτό το παράδειγμα, πρόσθεσα ορισμένα στοιχεία εισόδου και ετικέτας για να δημιουργήσω την ακόλουθη συμπεριφορά:
- Κάθε στοιχείο name=menu-item-trigger εκτός από το πρώτο στην κατάσταση :checked θα αλλάξει την ορατότητα και τις θέσεις των επόμενων στοιχείων label.menu-item-close και div.menu-sub έτσι ώστε το label.menu-item-close Το στοιχείο επικαλύπτεται πλήρως με το στοιχείο label.menu-item-label και το div.menu-sub εμφανίστηκε κάτω από το στοιχείο label.menu-item-label. Δηλαδή, ανοίγουμε ένα υπομενού και αλλάζουμε τη συμπεριφορά όταν κάνουμε κλικ στο κύριο μενού.
- Το πρώτο στοιχείο name=menu-item-trigger θα χρησιμοποιηθεί μόνο για την αναίρεση όλων των εφαρμοζόμενων αλλαγών στην προηγούμενη παράγραφο, δηλαδή για το κλείσιμο του υπομενού.
Επιλέχθηκε ένα στοιχείο μενού:
Μετά από τέτοιους χειρισμούς, το μόνο που μένει είναι να κρύψουμε τα στοιχεία εισόδου.
Flexbox
Τώρα πρέπει να προσθέσουμε στυλ έτσι ώστε αυτό το μενού να εμφανίζεται καλά σε διαφορετικές αναλύσεις και σε διαφορετικά προγράμματα περιήγησης. Επί του παρόντος, έχουμε επικεντρώσει τις προσπάθειές μας στην υποστήριξη εκείνων των προγραμμάτων περιήγησης που χρησιμοποιούνται περισσότερο από τους επισκέπτες του πόρου μας. Το αποτέλεσμα είναι μια μικρή λίστα: Chrome, Firefox, IE Edge, IE 11 και οι πιο πρόσφατες εκδόσεις τους για κινητά.Η υποστήριξη παρέχεται με την προσθήκη προθεμάτων (postcss) και ξεχωριστά στυλ γραφής για ένα συγκεκριμένο πρόγραμμα περιήγησης.
Το Flexbox διευκολύνει την επίτευξη ανταπόκρισης. Αρκεί να περιγράψουμε το δοχείο, αλλά μερικές φορές θα χρειαστεί να λυθούν προβλήματα με το περιεχόμενο μέσα. Για παράδειγμα:
- στοιχεία μενού με μεγάλες λέξεις όπως "βάση γνώσης" και η γερμανική μετάφραση "Wissensdatenbank". Σε αυτήν την περίπτωση, προστίθεται ένα στοιχείο αναδίπλωσης για το κείμενο, στο οποίο εφαρμόζονται τα ακόλουθα στυλ:
Label-text (// @link: http://htmlbook.ru/css/text-overflow υπερχείλιση: κρυφό; text-overflow: έλλειψη; πλάτος: 100%; εμφάνιση: inline-block; )
- Εικόνες που πρέπει να τεντωθούν σε πλάτος, αλλά κατά τη ρύθμιση του πλάτους: 100%; εκτείνονται πέρα από το γονικό μπλοκ. Το μέγεθος του κουτιού θα βοηθήσει εδώ: border-box; για αυτό το στοιχείο?
- Μπορεί επίσης να υπάρχουν προβλήματα με τα θυγατρικά στοιχεία που δεν καταλαμβάνουν όλο το δυνατό μήκος ή δεν κατανέμονται ομοιόμορφα. flex: 1 1 auto μπορεί να βοηθήσει εδώ.
Μενού (οθόνη: flex; στοίχιση στοιχείων: κέντρο; flex-wrap: wrap; )
Κάθε στοιχείο στο κοντέινερ πρέπει να είναι διαμορφωμένο έτσι ώστε να καλύπτει όλο τον πιθανό χώρο και να ευθυγραμμίζει το περιεχόμενο μέσα του κατακόρυφα στο κέντρο:
Στοιχείο μενού ( flex: 1 1 auto; οθόνη: flex; flex-direction: στήλη; align-στοιχεία: stretch; )
Μια πιο όμορφη εμφάνιση μενού μπορεί να επιτευχθεί χρησιμοποιώντας
Οι μέρες των διατάξεων σελίδων που βασίζονται σε αιωρούμενα στοιχεία και χειραγώγηση των περιθωρίων ανήκουν σχεδόν στο παρελθόν. Το CSS δίνει στους προγραμματιστές νέες και βελτιωμένες ιδιότητες για τη δημιουργία διατάξεων. Τέτοια παραδοσιακά πράγματα διάταξης όπως η κάθετη στοίχιση, οι ομοιόμορφες αποστάσεις μεταξύ των στοιχείων, η αλλαγή της διάταξης των στοιχείων χωρίς αλλαγή της αλληλουχίας τους στη διάταξη και άλλα μοτίβα όπως το "κολλημένο υποσέλιδο" υλοποιούνται εύκολα χρησιμοποιώντας το Flexbox.
Σε αυτό το άρθρο θα εξετάσουμε τα μοτίβα διάταξης που είναι κατάλληλα για εφαρμογή στο Flexbox. Ως παράδειγμα, θα χρησιμοποιήσουμε τη διεπαφή της εφαρμογής Tracks, η οποία εφαρμόζει τις αρχές του ατομικού σχεδιασμού. Θα μιλήσω για περιπτώσεις όπου το Flexbox είναι χρήσιμο και θα αναφέρω τις παγίδες του συνδυασμού του με συγκεκριμένα μοτίβα διάταξης. Θα εξετάσουμε τα μοτίβα που σας προκαλούν προβλήματα, θα προσφέρουμε εναλλακτικές λύσεις για την επίλυση προβλημάτων και θα προσφέρουμε πρόσθετες τακτικές για να αρχίσετε να χρησιμοποιείτε αυτήν την ιδιότητα τώρα.
Ευέλικτα ατομικά εξαρτήματα
Η διεπαφή Tracks ακολουθεί μια προσέγγιση που εξετάζει κάθε κομμάτι μεμονωμένα, με βάση τις αρχές του Brad Frost.
Η φιλοσοφία ατομικού σχεδιασμού μπορεί να θεωρηθεί ως το ισοδύναμο των μπλοκ LEGO για το σχεδιασμό ιστοσελίδων. Επιστημονικοί όροι όπως οργανισμός, μόριο, άτομο χρησιμοποιούνται για να δώσουν στους προγραμματιστές μια ταξινόμηση των στοιχείων διεπαφής και, κατά συνέπεια, μια βαθύτερη κατανόηση κάθε θραύσματος ως μέρος του συνόλου. Αυτή η μέθοδος κατηγοριοποίησης καθιστά δυνατό τον εντοπισμό αυτών των μοτίβων και αποτρέπει εξωτερικούς παράγοντες όπως τα πλέγματα, τα χρώματα και οι αποστάσεις από το να επηρεάσουν αυτή τη διαδικασία. Η δημιουργία μιας διεπαφής από το μικροεπίπεδο επιτρέπει μεγαλύτερη επαναχρησιμοποίηση των βασικών μικροστοιχείων του.
Εικόνα 1: Αυτά τα στοιχεία εφαρμογής χρησιμοποιούνται για την εμφάνιση δεδομένων με βάση τις αρχές ατομικού σχεδιασμού. Μπορείτε να μαντέψετε ποια χρησιμοποιούν το Flexbox; (μεγαλύτερη έκδοση)
Εικόνα 2. Η κύρια διεπαφή της εφαρμογής Tracks, εκμεταλλευόμενη το flexbox και τον ατομικό σχεδιασμό. (μεγαλύτερη έκδοση)
Ο σχεδιασμός της διεπαφής υποβλήθηκε ως ένα σύνολο πρωτοτύπων στο InVision, με τεκμηρίωση της ροής και της διεπαφής χρήστη. Κατά τον αρχικό έλεγχο διεπαφής χρήστη, άρχισα να εντοπίζω περιοχές όπου ήταν λογικό να εφαρμοστεί το Flexbox. Αποφάσισα επίσης να χρησιμοποιήσω το Flexbox για τη διάταξη της σελίδας, χρησιμοποιώντας τα παραδοσιακά μοτίβα "πλευρική γραμμή στα αριστερά, το κύριο περιεχόμενο στα δεξιά" που συνήθως υλοποιούνται με αιωρούμενα πλαίσια.
Html.flexbox ul.flexbox-target, html.no-js ul.flexbox-target ( εμφάνιση: flex; flex-direction: row; ) html.no-flexbox ul.flexbox-target li, html.no-js ul. flexbox-target li ( οθόνη: inline-block; /* Θα μπορούσε επίσης να χρησιμοποιήσει ένα σύστημα διάταξης float-positioned-layout αντί */ )
Όπου η υποστήριξη flexbox δεν είναι διαθέσιμη, θα χρησιμοποιήσουμε το display: inline-block . Στην ίδια δήλωση θα προσθέσουμε την κλάση no-js, σε περίπτωση που η JavaScript είναι απενεργοποιημένη στο πρόγραμμα περιήγησης. Ο καταρράκτης CSS θα λειτουργεί ακόμα και όπου δεν υπάρχει Flexbox ή JavaScript, ακόμα και αν υπάρχουν προβλήματα φόρτωσης. Το Flexbox μπορεί να συνυπάρχει με float, εμφάνιση: πίνακας και θέση: σχετική. Τα προγράμματα περιήγησης που υποστηρίζουν το Flexbox το χρησιμοποιούν κατά προτεραιότητα, ενώ τα προγράμματα περιήγησης που δεν το υποστηρίζουν θα περιορίζονται στους παραδοσιακούς μηχανισμούς διάταξης CSS.
Όπως πάντα, η τελική επιλογή τεχνολογίας θα εξαρτηθεί από τους στόχους του έργου, τον προϋπολογισμό του και τα δεδομένα ανάλυσης. Ο χρυσός κανόνας μου είναι να επιλέγω πάντα την πιο έξυπνη επιλογή για ένα έργο.
Σχέδια γραμμών
Τα στοιχεία πλοήγησης αποδείχθηκαν πολύ κατάλληλα για το Flexbox, όχι μόνο λόγω της ευκολίας εφαρμογής, αλλά και λόγω της μείωσης του χρόνου που δαπανάται. Τα ενσωματωμένα μοτίβα είναι διαβόητα επειδή απορροφούν τον χρόνο των προγραμματιστών, αλλά με το Flexbox μιλάμε για λεπτά. Εάν εφαρμόσατε τέτοια πράγματα στην προ-IE9 εποχή, θα καταλάβετε πόσο σημαντικό είναι αυτό.
Εικόνα 3: Αυτή η πλοήγηση του πίνακα διαχείρισης χρησιμοποιεί ένα μοτίβο γραμμής με κατακόρυφα στο κέντρο στοιχεία πλοήγησης. (μεγαλύτερη έκδοση)
Η σήμανση μοτίβου πλοήγησης του πίνακα διαχείρισης αποτελείται από μια ετικέτα πλοήγησης που αναδιπλώνει συνδέσμους. Εδώ είναι το HTML αυτού του μοτίβου:
Και τα αντίστοιχα στυλ:
Nav ( display: flex; align-item: center; /* Κέντρο στοιχείων πλοήγησης κατακόρυφα */ ) nav a ( display: inline-block; /* Για να αποφύγετε προβλήματα διάταξης για ενσωματωμένα στοιχεία με την ιδιότητα παραγγελίας στον IE 10 */ ) nav a (flex: 1; )
Το CSS αποδείχθηκε τόσο μινιμαλιστικό όσο και η σήμανση. Σημειώστε το ενσωματωμένο μπλοκ που καθορίζεται για τους συνδέσμους πλοήγησης. Αυτή η δήλωση επιλύει τυχόν μελλοντικά προβλήματα στο IE10, εάν αποφασίσετε να αλλάξετε τη σειρά των στοιχείων με την ιδιότητα παραγγελίας. Γνωρίζουμε επίσης ότι όλα τα περιθώρια και τα περιθώρια που δίνονται στους άμεσους απογόνους του flex container προκαλούν προβλήματα διάταξης στον IE10· για να αποφύγετε τέτοια πράγματα, είναι λογικό να ελέγχετε πάντα το πρόγραμμα περιήγησης διάταξης.
Εικόνα 4. Το μοτίβο πλοήγησης της κεφαλίδας με ένα κεντραρισμένο λογότυπο βρίσκεται συχνά στον Ιστό και προσαρμόζεται εύκολα στο Flexbox. (μεγαλύτερη έκδοση)
Παραδοσιακά, το ενσωματωμένο μοτίβο συνήθως υλοποιείται χρησιμοποιώντας μη σημασιολογική σήμανση, με το Flexbox μπορούμε να κάνουμε χωρίς τέτοια κόλπα.
Η διάταξη αποτελείται από μια συλλογή στοιχείων μενού τοποθετημένα αριστερά και δεξιά του λογότυπου στο κέντρο. Η σήμανση για αυτό το μοτίβο είναι η εξής:
Το Flexbox μπορεί να μειώσει την ανάγκη για παραβιάσεις HTML και επιτρέπει τη διατήρηση της σημασιολογίας, όπως φαίνεται στη σήμανση. Η σημασιολογική υποστήριξη είναι σημαντική επειδή αυτό το HTML έχει μεγάλες πιθανότητες να χρησιμοποιηθεί στο μέλλον. Υπάρχουν πολλοί άλλοι λόγοι για αυτό που ξεφεύγουν από το πεδίο αυτής της συζήτησης.
Πριν από το Flexbox, οι προγραμματιστές χρησιμοποιούσαν οθόνη: inline-block και ακόμη και float: αριστερές προσεγγίσεις για την οργάνωση της ενσωματωμένης διάταξης. Το Flexbox είναι πλέον μια βιώσιμη επιλογή και οι προγραμματιστές δεν είναι πλέον αναγκασμένοι να χρησιμοποιούν κακές πρακτικές για χάρη του όμορφου σχεδιασμού. Το CSS που απαιτείται δεν είναι τόσο συνοπτικό όσο το προηγούμενο παράδειγμα μοτίβου στο Σχήμα 3, αλλά είναι ευκολότερο να εφαρμοστεί από τις παλαιότερες μεθόδους.
Pipeline-header ( display: flex; align-item: center; justify-content: space-between; ) .pipeline-header > a ( display: inline-block; /* Το IE 10 δεν αναγνωρίζει τη σειρά, γι' αυτό το κάνουμε αυτό για να αποφύγετε τις περίεργες διατάξεις εκεί. */ ) .pipeline-logo ( flex: 1; order: 2; text-align: center; ) .pipeline-nav ( flex: 1.25; order: 1; ) .pipeline-search ( flex: 1; σειρά: 3; ) α (σειρά: 4; )
Όταν χρησιμοποιείτε το flexbox στο μοτίβο της εικόνας 3, να θυμάστε ότι η σειρά στη σήμανση μπορεί να αλλάξει. Εάν το λογότυπο πρέπει να μετακινηθεί, αυτό γίνεται εύκολα χρησιμοποιώντας την ιδιότητα παραγγελίας. Λάβετε υπόψη ότι η σειρά στη σήμανση είναι σημαντική για την προσβασιμότητα και αυτό είναι αμφιλεγόμενο όταν πρόκειται για το Flexbox, ειδικά δεδομένης της ποικίλης εφαρμογής της προσβασιμότητας στα προγράμματα περιήγησης. Τα προγράμματα περιήγησης (εκτός του Firefox) και τα προγράμματα ανάγνωσης οθόνης χρησιμοποιούν σειρά διάταξης για πλοήγηση με πληκτρολόγιο αντί για οπτική σειρά που δημιουργείται από το CSS.
Εικόνα 5: Η ροή που αναπαρίσταται στη σήμανση και αποδίδεται στο πρόγραμμα περιήγησης, επαναλαμβανόμενη σειρά χρησιμοποιώντας το flexbox χωρίς αλλαγή της σήμανσης. (μεγαλύτερη έκδοση)
Παρακάτω είναι ο κώδικας για μια τέτοια διάταξη. Η σήμανση δεν χρησιμοποιείται για την αλλαγή της σειράς των στοιχείων.
Εδώ το CSS χρησιμοποιείται για την αλλαγή της σειράς των στοιχείων στο διάγραμμα στα δεξιά της Εικόνας 5.
Container ( εμφάνιση: flex; flex-direction: στήλες; /* σειρά είναι η προεπιλεγμένη τιμή */ ) header ( order: 2; ) main ( order: 3; ) footer ( order: 1; )
Αυτός ο τύπος διάταξης χρησιμοποιείται για κάτι περισσότερο από απλή πλοήγηση. Ίσως το έχετε δει στο υποσέλιδο.
Εικόνα 6: Το ίδιο μοτίβο που χρησιμοποιήσαμε για την πλοήγηση χρησιμοποιείται στο υποσέλιδο. (μεγαλύτερη έκδοση)
Όταν χρησιμοποιείτε αυτό το μοτίβο, έχετε υπόψη σας ότι το περιεχόμενο ενδέχεται να μην έχει αρκετό χώρο στο κοντέινερ. Πρέπει το περιεχόμενο να απλώνεται από το κέντρο προς τις άκρες; Πώς θα επηρεάσει αυτό το υπόλοιπο της διάταξης; Σκεφτείτε αυτές τις ερωτήσεις πριν ξεκινήσετε το έργο. Και να έχετε κατά νου ότι η πλοήγηση με πληκτρολόγιο είναι σημαντική για τους χρήστες.
Πεδία εισαγωγής γραμμής
Τα σχήματα μπορεί να είναι ένας εφιάλτης σχεδιασμού, ειδικά όταν συνδέονται στενά με μια περίπλοκη δομή πλέγματος κατασκευασμένη στο Photoshop. Το μοτίβο "inline label", όπως το αποκαλώ, είναι τόσο σημαντικό για τη βιομηχανία μας όσο το Fender Stratocaster για τη ροκ μουσική.
Εικόνα 7: Οι ενσωματωμένες ετικέτες και τα πεδία εισαγωγής είναι μια άλλη περιοχή όπου μπορεί να χρησιμοποιηθεί το Flexbox. Αλλά να είστε προσεκτικοί σχετικά με τον τρόπο με τον οποίο το κείμενο της ετικέτας ωθεί προς τα πίσω στο πεδίο εισαγωγής, ανάλογα με την ποσότητα του κειμένου. (μεγαλύτερη έκδοση)
Όπως αναφέρθηκε στην προηγούμενη ενότητα, πρέπει να αποφασίσετε πώς θα διανεμηθεί το περιεχόμενο εντός του κοντέινερ όταν αλλάζει το μέγεθος του προγράμματος περιήγησης ή όταν υπάρχει δυναμικό περιεχόμενο.
Εικόνα 8: Αποφασίστε πώς θα επεκταθεί το περιεχόμενό σας. Στα αριστερά υπάρχει μια οθόνη: πίνακας με κατακόρυφη στοίχιση στη μέση, στα δεξιά είναι ένα flexbox με κεντρική στοίχιση. (μεγαλύτερη έκδοση)
Αυτά τα στιγμιότυπα οθόνης δείχνουν ξεκάθαρα σφάλματα Flexbox με δυναμικό ή μεγάλο περιεχόμενο. Το εφέ στη σωστή εικόνα είναι αυτό που ονομάζω "κεντρική ώθηση", που σημαίνει ότι το νέο περιεχόμενο ωθείται προς τα έξω από το κέντρο.
Εδώ είναι η σήμανση για το μοτίβο ετικέτας γραμμής στην εικόνα 8.
Η λύση στο πρόβλημα είναι η χρήση της οθόνης: πίνακας; για μεγάλο κείμενο. Αυτό επιτρέπει στο περιεχόμενο να ρέει από πάνω προς τα κάτω και όχι από το κέντρο προς τις άκρες.
Form-group ( display: flex; ) .form-group label ( εμφάνιση: πίνακας; κατακόρυφη στοίχιση: μέση; ) .form-group είσοδος ( flex: 1; )
Ο συνδυασμός flexbox και display: table είναι μια εξαιρετική τεχνική που αξίζει να εξερευνήσετε περαιτέρω. Αλλά όταν το χρησιμοποιείτε, είναι σημαντικό να ελέγχετε πάντα τη διάταξη σε ένα δοκιμαστικό περιβάλλον, προκειμένου να εντοπίζονται έγκαιρα σφάλματα.
Εικόνα 9: Χρησιμοποιώντας πεδία εισαγωγής και κουμπιά στην ίδια γραμμή, δημιουργείται ισορροπία στο σχέδιο διατηρώντας τα ίσα σε ύψος. (μεγαλύτερη έκδοση)
Έχω δει πολλά πεδία αναζήτησης που εφαρμόζονται χρησιμοποιώντας αυτό το μοτίβο. Αυτό είναι ένα πολύ ευέλικτο μοτίβο που μπορεί να επαναχρησιμοποιηθεί σε μια μεγάλη ποικιλία προτύπων. Φυσικά, το CSS μπορεί να εισαγάγει ευελιξία μοτίβων εδώ χρησιμοποιώντας ιδιότητες ειδικές για το περιβάλλον· αυτό θα πρέπει να αποφεύγεται.
Το απαιτούμενο HTML είναι τυπικό και περιλαμβάνει ένα περιτύλιγμα div για τη δομή flexbox.
Και εδώ είναι τα στυλ:
Form-group ( display: flex; ) .form-group input ( flex: 1; )
Πτυσώμενο μενού
Εικόνα 10. Ένα τμήμα της σελίδας με ένα αναπτυσσόμενο μενού επισημαίνεται χρησιμοποιώντας τις δυνατότητες Flexbox για γρήγορη τοποθέτηση. (μεγαλύτερη έκδοση)
Το αναπτυσσόμενο μενού αποτελείται από μια στήλη στα αριστερά που περιέχει κάθετα κεντραρισμένα ενσωματωμένα στοιχεία και μια λίστα στοιχείων στα δεξιά με κάθε στοιχείο στη δική του σειρά.
Εικόνα 11. Το κύριο μενού διεπαφής έχει δημιουργηθεί χρησιμοποιώντας το Flexbox για διάταξη. (μεγαλύτερη έκδοση)
Η σήμανση για αυτό το μενού πλοήγησης χρησιμοποιεί τον ακόλουθο κώδικα HTML ως βάση.
Το αντίστοιχο CSS είναι απλό και σαφές, όπως ακριβώς αρέσει στους προγραμματιστές.
Μενού ( εμφάνιση: flex; ) .menu__options ( display: flex; align-item: center; ) .menu__items ( display: flex; flex-direction: στήλη; )
Η απαιτούμενη διάταξη γίνεται με μερικές γραμμές κώδικα. Επιπλέον, αυτός ο κώδικας διαχωρίζεται από τη δομή του πλέγματος και η σήμανση διατηρεί τη σημασιολογική της σημασία. Αυτό είναι ένα άλλο παράδειγμα της ικανότητας του Flexbox να αποφεύγει την περίπλοκη τοποθέτηση και τις ακατάστατες διατάξεις.
Αντικείμενα πολυμέσων
Εικόνα 12: Το μοτίβο αντικειμένων μέσων χρησιμοποιεί ένα flexbox, με ένα SVG σταθερού πλάτους τοποθετημένο στα αριστερά και το υπόλοιπο περιεχόμενο flexbox τοποθετημένο δίπλα του. (μεγαλύτερη έκδοση)
Αυτό το καθολικό μοτίβο, γνωστό ως "αντικείμενο πολυμέσων", τοποθετεί μια εικόνα ή ένα βίντεο στη μία πλευρά με το υπόλοιπο περιεχόμενο δίπλα του.
Medi-obj ( οθόνη: flex; στοίχιση στοιχείων: flex-start; ) .media-obj__body ( flex: 1; )
Εικόνα 13. Αυτή είναι μια ακραία περίπτωση αλλαγής μεγέθους του παραθύρου του προγράμματος περιήγησης, η εικόνα έχει οριστεί στο μέγιστο πλάτος και η δεξιά πλευρά έχει οριστεί σε flex 1. Να είστε προσεκτικοί όταν αναμιγνύετε στοιχεία σταθερού πλάτους και στοιχεία ευέλικτης
Το Flexbox λειτουργεί εξαιρετικά με αυτό το μοτίβο, αλλά να είστε προσεκτικοί γιατί το περιεχόμενο πολυμέσων μπορεί να αλληλεπιδράσει με άλλο περιεχόμενο με τον ίδιο τρόπο όπως φαίνεται παραπάνω. Στο παράδειγμα, μπορείτε να δείτε πώς ο χώρος γραφικών καταρρέει και το κείμενο ωθείται προς τα έξω από πάνω. Αυτό μπορεί να φαίνεται σαν ένα ανόητο παράδειγμα, γιατί ποιος θα έκανε το πρόγραμμα περιήγησής του τόσο στενό; Αλλά αυτό δεν είναι το σημαντικό - πρέπει απλώς να καταλάβουμε πώς το περιεχόμενο σχετίζεται με το περιβάλλον του πριν χρησιμοποιήσουμε το Flexbox.
Μια λύση σε αυτό το μοτίβο θα ήταν να ρυθμίσετε τις εικόνες στο μέγιστο πλάτος: 100% για τα μέσα μέσα στο flexbox ή να χρησιμοποιήσετε ένα σταθερό πλάτος εικόνας και ερωτήματα μέσων για να τις προσαρμόσετε όπως απαιτείται.
Ημερολόγιο Flexbox
Το Ημερολόγιο είναι ένα από τα πιο κοινά γραφικά στοιχεία. Ίσως ρωτήσετε, γιατί να μην χρησιμοποιήσετε έναν πίνακα; Στην περίπτωσή μας, το ημερολόγιο χρησιμοποιείται για την απλή επιλογή ημερομηνιών, γι' αυτό αποφάσισα να χρησιμοποιήσω κουμπιά για ημέρες, μήνες και χρόνια και να περιορίσω αυτά τα κουμπιά στα περιγράμματα σειρών (κάθε σειρά ημερολογίου εβδομάδας είναι τυλιγμένη σε ξεχωριστό div). Η χρήση αυτής της προσέγγισης σάς επιτρέπει να μειώσετε τον όγκο της σήμανσης και να διευκολύνετε τη δημιουργία μιας διάταξης (πολλές ευχαριστίες