Ο τελικός οδηγός για το Flexbox - Μάθηση μέσω παραδειγμάτων

Σημείωση - αυτή είναι μια μακρά ανάγνωση, οπότε αν θέλετε, μπορείτε να κατεβάσετε αυτό το άρθρο και να το διαβάσετε εδώ εκτός σύνδεσης.

Ποιος είναι ο καλύτερος τρόπος για να κατανοήσετε το Flexbox; Μάθετε τα θεμελιώδη στοιχεία, και στη συνέχεια χτίζετε πολλά πράγματα. Και ακριβώς αυτό που θα κάνουμε σε αυτό το άρθρο.

Λίγα πράγματα που πρέπει να σημειώσετε

  • Αυτό το άρθρο γράφτηκε με ενδιάμεσους προγραμματιστές στο μυαλό και υποθέτει ότι γνωρίζετε ήδη λίγο για το Flexbox. Αλλά…
  • Αν γνωρίζετε κάποιο CSS, αλλά δεν ξέρω καθόλου το Flexbox, έγραψα εδώ έναν πλήρη οδηγό (ελεύθερο άρθρο, 46 λεπτά ανάγνωση).
  • Και αν δεν γνωρίζετε πολύ καλά το CSS, συνιστώ να πάρω την πλήρη (πρακτική) Εισαγωγή μου στο CSS (πληρωμένο μάθημα με 74 μαθήματα).
  • Δεν χρειάζεται να ακολουθήσετε τα παραδείγματα σε αυτό το άρθρο με τη σειρά που αναφέρεται εδώ.
  • Το Flexbox είναι μόνο μια τεχνική διάταξης. Τα έργα του πραγματικού κόσμου απαιτούν περισσότερες από τις διατάξεις.
  • Όταν βλέπετε μια συμβολική αναφορά όπως div.ohans, αναφέρεται σε ένα div με ένα όνομα κλάσης

Παράδειγμα 1: Πώς να φτιάξετε μια συλλογή φωτογραφιών με το Flexbox

Η δημιουργία φωτογραφιών σε σειρές και στήλες με το Flexbox είναι ευκολότερη από ό, τι αντιλαμβάνονται τα περισσότερα άτομα.

Εξετάστε μια απλή σήμανση, όπως έτσι:

                             

Έχουμε 10 εικόνες μέσα σε ένα main.gallery.

Υποθέστε ότι το main.gallery σχεδιάστηκε για να καλύψει την διαθέσιμη οθόνη.

.εκθεσιακός χώρος {
   min-ύψος: 100vh
}}

Μια γρήγορη σημείωση για τις εικόνες

Από προεπιλογή, οι εικόνες είναι στοιχεία inline-block. Έχουν πλάτος και ύψος. Θα παραμείνουν σε μια γραμμή, εκτός αν περιορίζονται από το μέγεθος, όπως οι εικόνες είναι πολύ μεγάλες για να χωρέσει σε μια γραμμή.

Το σημείο εκκίνησης

Βάζοντας τα πάντα μαζί, το αποτέλεσμα όλων των σημείων σήμανσης και στυλ παραπάνω είναι αυτό:

10 εικόνες με τις δηλώσεις πλάτους και ύψους άθικτες. Που πέφτουν στην επόμενη γραμμή όταν χρειάζεται. Υπάκουοι παλικαίοι)

Τώρα, πάρτε το Flexbox στη σκηνή:

.εκθεσιακός χώρος {
    οθόνη: flex
 }}

Σε αυτό το σημείο, η προεπιλεγμένη συμπεριφορά των εικόνων έχει αλλάξει. Πηγαίνουν από το να είναι inline-μπλοκ στοιχεία για να είναι flex-στοιχεία.

Ως αποτέλεσμα του πλαισίου Flexbox που έχει ξεκινήσει μέσα στο .gallery, οι εικόνες θα παγιδευτούν τώρα σε μία γραμμή. Επιπλέον, θα τεντωθούν κατά μήκος της κάθετης όπως έτσι:

Οι εικόνες τώρα τεντώνονται κατά μήκος της κατακόρυφης κατεύθυνσης και σβήνουν σε μια γραμμή. Τίποτα δεν είναι πιο άσχημο :(

Αυτό είναι αποτέλεσμα της προεπιλεγμένης συμπεριφοράς του Flexbox:

  1. Squash όλα τα παιδικά στοιχεία σε μια γραμμή. Μην τυλίγετε τα στοιχεία.

Αυτό είναι κακό για μια γκαλερί, γι 'αυτό αλλάζουμε αυτή τη συμπεριφορά όπως έτσι:

.εκθεσιακός χώρος {
    flex-wrap: τυλίξτε
}}

Αυτό θα τυλίξει τα στοιχεία και θα τα σπάσει σε πολλαπλές γραμμές όταν είναι απαραίτητο.

Με την αλλαγή της τιμής περιτυλίγματος, οι εικόνες τυλίγονται τώρα στην επόμενη γραμμή

2. Οι εικόνες τυλίγονται τώρα στην επόμενη γραμμή. Αλλά εξακολουθούν να τεντώνονται κατά μήκος της κάθετης. Σίγουρα δεν θέλουμε αυτή τη συμπεριφορά καθώς διαστρεβλώνει τις εικόνες.

Η συμπεριφορά τάνυσης οφείλεται στην προεπιλεγμένη τιμή ευθυγράμμισης-αντικειμένων στα κιβώτια flex.

στοιχεία ευθυγράμμισης: τεντώστε

Ας το αλλάξουμε:

.εκθεσιακός χώρος {
  ...
  ευθυγράμμιση-αντικείμενα: flex-start
}}

Αυτό θα κρατήσει τις εικόνες από το τέντωμα. Θα λάβουν τις προκαθορισμένες τιμές πλάτους και ύψους.

Θα ευθυγραμμιστούν επίσης με την αρχή του κάθετου άξονα όπως φαίνεται παρακάτω:

Τώρα έχουμε εικόνες που δεν είναι παραμορφωμένες. Αυτό είναι λίγο όπου ξεκινήσαμε πριν την εισαγωγή του Flexbox.

Τώρα έχουμε την γκαλερί μας powered by Flexbox.

Το πλεονέκτημα της χρήσης του Flexbox

Σε αυτό το σημείο δεν υπάρχει μεγάλο πλεονέκτημα για τη χρήση του Flexbox. Έχουμε το ίδιο βλέμμα που είχαμε πριν ξεκινήσουμε το μοντέλο Flexbox.

Εκτός από τη λήψη δωρεάν γκαλερί απόκρισης, τα άλλα πλεονεκτήματα της χρήσης του Flexbox προέρχονται από τις επιλογές ευθυγράμμισης που φέρνει.

Θυμηθείτε ότι το εύκαμπτο δοχείο, το .gallery παίρνει τις ακόλουθες τιμές ιδιότητας. Εύκολη κατεύθυνση: σειρά justify-content: flex-start και align-items: flex-start.

Η διάταξη της γκαλερί μπορεί να αλλάξει σε μια στιγμή, ακολουθώντας τις προκαθορισμένες τιμές όπως φαίνεται παρακάτω:

.εκθεσιακός χώρος {
   ...
   justify-content: center;
}}
Οι εικόνες είναι πλέον τέλεια κεντραρισμένες κατά μήκος του οριζόντιου.

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

.εκθεσιακός χώρος {
   ...
   justify-content: center;
   ευθυγράμμιση-στοιχεία: κέντρο
}}
Λάβοντας περαιτέρω τα βήματα, έχουμε τις εικόνες τέλεια ευθυγραμμισμένες με το κέντρο (οριζόντια και κάθετα)

Όπως φαίνεται στην παραπάνω εικόνα, αυτή ευθυγραμμίζει τις εικόνες τόσο οριζόντια όσο και κατακόρυφα στο κέντρο του .gallery

Με το Flexbox υπάρχουν πολλές επιλογές ευθυγράμμισης. Μη διστάσετε να χρησιμοποιήσετε μερικές επιλογές ευθυγράμμισης, όπως κρίνετε κατάλληλο.

Μπορείτε να δείτε την πραγματική γκαλερί Flexbox σε αυτό το CodePen.

Παράδειγμα 2: Πώς να δημιουργήσετε κάρτες με το Flexbox

Οι κάρτες έχουν γίνει δημοφιλείς στο Διαδίκτυο. Το Google, το Twitter, το Pinterest, και φαίνεται ότι όλοι οι άλλοι κινούνται σε κάρτες.

Μια κάρτα είναι ένα μοτίβο σχεδιασμού UI που ομαδοποιεί σχετικές πληροφορίες σε ένα δοχείο ευέλικτου μεγέθους. Είναι οπτικά μοιάζει με μια κάρτα παιχνιδιού.

Υπάρχουν πολλές καλές χρήσεις για κάρτες. Ένα κοινό είναι το περίφημο πλέγμα τιμών.

δειγματοληψία πίνακα τιμών δειγματοληψίας

Ας χτίσουμε ένα.

Η σήμανση

Κάθε κάρτα θα λάβει μια σήμανση όπως παρακάτω:

  
  
  
        
  •     
  •     
  •      <κουμπί>

Θα υπάρχουν τουλάχιστον 3 κάρτες. Τυλίξτε τις κάρτες σε κάρτες div.card

Τώρα έχουμε ένα γονικό στοιχείο.

Για αυτό το παράδειγμα, το γονικό στοιχείο έχει ρυθμιστεί για να γεμίσει ολόκληρο το παράθυρο προβολής.

. κάρτες {
   min-ύψος: 100vh
}}

Ρυθμίστε το Flexbox

Το παρακάτω μπλοκ κώδικα θα εκκινήσει ένα πλαίσιο μορφοποίησης Flexbox μέσα σε καρτέλες

. κάρτες {
  οθόνη: flex;
  flex-wrap: τυλίξτε
}}

Αν θυμάστε το τελευταίο παράδειγμα, το flex-wrap θα επιτρέψει στα προϊόντα flex να σπάσουν σε μια άλλη γραμμή.

Αυτό συμβαίνει όταν τα παιδικά στοιχεία δεν μπορούν να χωρέσουν στο γονικό στοιχείο. Αυτό οφείλεται στο μεγαλύτερο υπολογισμένο μέγεθος πλάτους των συνδυασμένων παιδικών στοιχείων.

Προχωρήστε και δώστε το .card ένα αρχικό πλάτος.

Χρήση του Flexbox:

.card {
  flex: 0 0 250px
}}

Αυτό θα θέσει τις τιμές flex-grow και flex-shrink σε 0. Η τιμή flex-base θα οριστεί σε 250px

Σε αυτό το σημείο, οι κάρτες θα ευθυγραμμιστούν με την αρχή της σελίδας. Θα τεντώσουν επίσης κατά μήκος της κάθετης.

κάρτες ευθυγραμμισμένες με την αρχή της σελίδας

Σε ορισμένες περιπτώσεις, αυτό μπορεί να είναι ιδανικό για τη χρήση σας. Αλλά στις περισσότερες περιπτώσεις, δεν θα.

Η προεπιλεγμένη συμπεριφορά των δοχείων Flex

Το παραπάνω αποτέλεσμα οφείλεται στην προεπιλεγμένη συμπεριφορά των δοχείων flex.

Οι κάρτες αρχίζουν στην αρχή της σελίδας στην επάνω αριστερή γωνία, επειδή το δικαιολογητικό-περιεχόμενο έχει οριστεί στην τιμή flex-start.

Επίσης, οι κάρτες τεντώνονται για να γεμίσουν ολόκληρο το ύψος του γονικού στοιχείου, επειδή τα στοιχεία ευθυγράμμισης έχουν ρυθμιστεί να τεντώνονται από προεπιλογή.

Τροποποίηση των προεπιλεγμένων τιμών

Μπορούμε να επιτύχουμε αρκετά εντυπωσιακά αποτελέσματα αλλάζοντας τις προεπιλεγμένες τιμές που προσφέρει το Flexbox.

Δες παρακάτω:

ευθυγράμμιση-αντικείμενα: flex-start; justify-content: centerευθυγράμμιση-αντικείμενα: flex-end; justify-content: centerευθυγράμμιση-στοιχεία: κέντρο justify-content: center

Για να δείτε το τελικό έργο, δείτε αυτό το CodePen.

Παράδειγμα 3: Πώς να δημιουργήσετε πλέγματα με το Flexbox

Ολόκληρα πλαίσια CSS βασίζονται στην έννοια που θα συζητηθεί σε αυτό το παράδειγμα. Είναι πολύ σημαντικό πράγμα.

Τι είναι ένα Πλέγμα;

Ένα πλέγμα είναι μια σειρά από τεμνόμενες κάθετες και οριζόντιες κατευθυντήριες γραμμές που χρησιμοποιούνται για τη δομή του περιεχομένου.

μια σειρά τεμνόμενων ίσων (κατακόρυφων, οριζόντιων) κατευθυντήριων γραμμών

Αν είστε εξοικειωμένοι με τα πλαίσια CSS, όπως το Bootstrap, τότε είστε σίγουροι ότι έχετε χρησιμοποιήσει πλέγματα πριν από τώρα.

Η διανυόμενη απόσταση μπορεί να διαφέρει, αλλά θα εξετάσουμε διαφορετικούς τύπους πλέγματος σε αυτό το παράδειγμα.

Ας ξεκινήσουμε με το πρώτο, βασικά πλέγματα.

Βασικά πλέγματα

Ένα σύνολο βασικών πλεγμάτων το καθένα έχει εξίσου διαχωρισμένες στήλες

Πρόκειται για πλέγματα με τα ακόλουθα χαρακτηριστικά:

  • Τα κελιά πλέγματος θα πρέπει να απέχουν εξίσου και να επεκτείνονται ώστε να ταιριάζουν σε ολόκληρη τη σειρά.
  • Τα κελιά του πλέγματος πρέπει να έχουν ίσα ύψη.

Είναι εύκολο να επιτευχθεί αυτό με το Flexbox. Εξετάστε την παρακάτω σήμανση:

  
1

Κάθε .row θα είναι το δικό του εύκαμπτο δοχείο.

Κάθε στοιχείο εντός του .row γίνεται έπειτα ένα στοιχείο flex. Όλα τα στοιχεία flex διανέμονται ομοιόμορφα στη σειρά.

Από το σχεδιασμό, δεν πρέπει να έχει σημασία αν έχουμε 3 παιδικά στοιχεία

  
1/3   
1/3   
1/3

Ή 6 στοιχεία παιδιών

  
1/6   
1/6   
1/6   
1/6   
1/6   
1/6

Ή 12 στοιχεία

  
1/12   
1/12   
1/12   
1/12   
1/12   
1/12   
1/12   
1/12   
1/12   
1/12   
1/12   
1/12

Η λύση

Υπάρχουν μόνο δύο βήματα για να γίνει αυτό.

  1. Ξεκινήστε ένα πλαίσιο μορφοποίησης Flexbox:
.row {
   οθόνη: flex;
}}

2. Έχετε το κάθε στοιχείο flex να επεκταθεί ώστε να ταιριάζει σε ολόκληρη τη σειρά σε ίσες αναλογίες:

.row_cell {
   flex: 1
}}

Και αυτό είναι.

Η λύση εξηγείται.

flex: 1

Το flex είναι ένα όνομα ιδιότητας στενογραφίας για την τοποθέτηση τριών ξεχωριστών ιδιοτήτων του Flexbox, των ευέλικτων, εύκαμπτων και εύκαμπτων ιδιοτήτων, με την αναφερόμενη σειρά.

flex: 1 έχει μόνο την τιμή 1. Αυτή η τιμή αποδίδεται στην ιδιότητα flex-grow.

Οι ιδιότητες flex-shrink και flex-base θα οριστούν σε 1 και 0.

flex: 1 === flex: 1 1 0

Κύτταρα πλέγματος με συγκεκριμένα μεγέθη

Μερικές φορές αυτό που θέλετε δεν είναι μια σειρά πλέγματος ίσων κυττάρων.

Μπορεί να θέλετε κύτταρα που είναι διπλάσια από τα άλλα κύτταρα ή οποιοδήποτε κλάσμα για αυτό το θέμα.

πλέγμα των κυττάρων σειράς που είναι 2x ή 3x τα άλλα κύτταρα.

Η λύση είναι πολύ απλή.

Σε αυτά τα συγκεκριμένα κελιά δικτύου, προσθέστε μια κλάση τροποποιητή όπως αυτή:

.row_cell - 2 {
   flex: 2
}}

Συμπεριλάβετε την τάξη στη σήμανση. Δείτε το πρώτο παιδί div στο παρακάτω σημάδι:

  
2x   
1/3   
1/3

Το κελί με την κλάση .row__cell - 2 θα είναι 2 φορές τα προεπιλεγμένα κελιά.

Για ένα κελί που αναλαμβάνει 3 φορές το διαθέσιμο χώρο:

.row_cell - 3 {
 flex: 3
}}

Κύτταρα πλέγματος με συγκεκριμένες ευθυγραμμίσεις

Χάρη στο Flexbox, κάθε κύτταρο δεν χρειάζεται να συνδέεται με κάποια τιμή ευθυγράμμισης. Μπορείτε να καθορίσετε την συγκεκριμένη ευθυγράμμιση για κάθε κελί.

Για να το κάνετε αυτό, χρησιμοποιήστε κατηγορίες τροποποιητών όπως αυτό:

.row_cell - κορυφή {
  ευθυγράμμιση-εαυτό: ευέλικτο ξεκίνημα
}}

Αυτό θα ευθυγραμμίσει το συγκεκριμένο κελί με την κορυφή της σειράς.

η εφαρμογή της .row_cell - κορυφαίας κλάσης θα ευθυγραμμίσει το συγκεκριμένο κελί με την κορυφή της σειράς

Πρέπει επίσης να προσθέσετε την κλάση στο συγκεκριμένο κελί στη σήμανση. Δείτε το πρώτο παιδί div στο παρακάτω σημάδι:

  
  
  

Παρακάτω παρατίθενται οι άλλες επιλογές ευθυγράμμισης:

.row_cell - κάτω {
  ευθυγράμμιση-εαυτό: ευέλικτο
}}
η εφαρμογή της κλάσης .row_cell - κάτω θα ευθυγραμμίσει το συγκεκριμένο κελί με το κάτω μέρος της σειράς
.row_cell - κέντρο {
  ευθυγράμμιση-εαυτό: κέντρο
}}
η εφαρμογή της κλάσης .row_cell - center θα ευθυγραμμίσει το συγκεκριμένο κελί με το κέντρο της γραμμής

Συνολική ευθυγράμμιση εντός των σειρών

Καθώς τα συγκεκριμένα κύτταρα μπορούν να ευθυγραμμιστούν, έτσι μπορούν όλα τα παιδικά στοιχεία μέσα στη σειρά.

Για να το κάνετε αυτό, χρησιμοποιήστε μια κλάση τροποποιητή όπως αυτή:

.row - επάνω {
   ευθυγράμμιση-αντικείμενα: flex-start
}}
μια σειρά με τα τρία κελιά ευθυγραμμισμένα στην κορυφή της σειράς.

Είναι σημαντικό να σημειωθεί ότι η κλάση τροποποιητή, .row - top πρέπει να προστεθεί στη γραμμή ή το γονικό κάδο flex-container

  
  
  

Οι άλλες επιλογές ευθυγράμμισης μπορούν να φαίνονται παρακάτω:

.row - center {
   στοιχεία ευθυγράμμισης: κέντρο
}}
μια σειρά με τα τρία κελιά ευθυγραμμισμένα στο κέντρο της σειράς.
.row - κάτω {
   ευθυγράμμιση-αντικείμενα: flex-end
}}
μια σειρά με τα τρία κελιά ευθυγραμμισμένα στο κέντρο της σειράς.

Ένθετα πλέγματα

Χωρίς να κάνουμε τίποτα συγκεκριμένα, αυτές οι σειρές μπορούν να ενωθούν μέσα τους.

Μια σειρά με δύο κελιά, ένα 2x το άλλο. Μέσα στο μεγαλύτερο κελί, έχει τοποθετηθεί μια σειρά από τρία κεντραρισμένα κελιά.

Μπορείτε να δείτε τα τελικά πλέγματα που δημιουργούνται εδώ.

Ακόμα περισσότερα πλέγματα

Παρόλο που μπορείτε να αποκτήσετε φανταχτερά δομικά πλέγματα με κάθετα πλέγματα Flexbox και ακόμα πιο πολύπλοκες διαμορφώσεις, χρησιμοποιήστε το καλύτερο εργαλείο για την εργασία. Μάθετε, ελέγξτε και χρησιμοποιήστε τη διάταξη του πλέγματος CSS. Είναι η τελική λύση CSS στα δίκτυα.

Παράδειγμα 4: Πώς να δημιουργήσετε διατάξεις διάταξης ιστότοπων με το Flexbox

Η κοινότητα γενικά κλίνει με τη χρήση του Flexbox για πλήρεις φυσαλίδες web layouts.

Ενώ συμφωνώ με αυτό, πιστεύω επίσης ότι σε ορισμένες περιπτώσεις μπορείτε να ξεφύγετε από αυτό.

Η πιο σημαντική συμβουλή που μπορώ να δώσω εδώ είναι:

Χρησιμοποιήστε το Flexbox όπου είναι λογικό

Θα εξηγήσω τη δήλωση στο ακόλουθο παράδειγμα.

Η Άγια Γραφή Διάταξη

Ποια καλύτερη διάταξη ιστοσελίδων για να χτίσει από το περίφημο "ιερό χάραγμα";

Η διάταξη του ιερού πολιτικού - κεφαλίδα, υποσέλιδο και 3 άλλα δοχεία περιεχομένου.

Υπάρχουν 2 τρόποι να προσπαθήσετε να φτιάξετε αυτή τη διάταξη με το Flexbox.

Το πρώτο είναι να έχουμε τη διάταξη που έχει δημιουργηθεί με το Flexbox. Τοποθετήστε την κεφαλίδα, το υποσέλιδο, το δοχείο, το αντικείμενο και αφήστε τα όλα σε ένα εύκαμπτο δοχείο.

Ας αρχίσουμε με αυτό.

Η σήμανση

Εξετάστε το παρακάτω βασικό σημάδι:


  
Header   
    
Άρθρο     

Μεταξύ άλλων, υπάρχει ένας ιδιαίτερος κανόνας που τηρεί ο ιερός γραμματικός. Αυτός ο κανόνας έχει εμπνεύσει την παραπάνω σήμανση:

Η κεντρική στήλη, το άρθρο πρέπει να εμφανίζεται πρώτα στη σήμανση, πριν από τις δύο πλευρικές ράβδους, ναυτιλία και άκρη.

Το " εμφανίζεται πρώτα στην σήμανση, αλλά είναι κεντραρισμένο στη διάταξη." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/highresolution-wallpapers/1567754052654.png" />

Ξεκινήστε το πλαίσιο μορφοποίησης Flexbox

σώμα {
   οθόνη: flex
}}

Επειδή τα υποκείμενα στοιχεία πρέπει να στοιβάζονται από πάνω προς τα κάτω, η προεπιλεγμένη κατεύθυνση του Flexbox πρέπει να αλλάξει.

σώμα {
 ...
 ευέλικτη κατεύθυνση: στήλη
}}

1. Η κεφαλίδα και το υποσέλιδο θα πρέπει να έχουν σταθερό πλάτος.

επί κεφαλής,
footer {
  πλάτος: 20vh / * μπορείτε να χρησιμοποιήσετε εικονοστοιχεία π.χ. 200px * /
}}

2.για να γεμίσετε το διαθέσιμο υπόλοιπο χώρο μέσα στο flex-container

main {
   flex: 1
}}

Υποθέτοντας ότι δεν ξεχάσατε, το flex: 1 είναι ισοδύναμο με το flex-grow: 1, flex-shrink: 1 και flex-base: 0

Αυτό θα προκαλέσει την

Σε αυτό το σημείο, πρέπει να φροντίσουμε τα περιεχόμενα στο κύριο μέρος που είναι το άρθρο, το σκάφος και η άκρη.

Ρυθμίστε το κύριο σώμα ως εύκαμπτο δοχείο:

main {
  οθόνη: flex
}}

Έχουν το σκάφος και το πλαίσιό του να κατέχουν σταθερά πλάτη:

nav,
κατά μέρος {
  πλάτος: 20vw
}}

Βεβαιωθείτε ότι το άρθρο καταλαμβάνει το υπόλοιπο διαθέσιμο χώρο:

άρθρο {
   flex: 1
}}
Το

Υπάρχει μόνο ένα ακόμα πράγμα που πρέπει να κάνετε τώρα.

Επανατοποθετήστε τα ευέλικτα στοιχεία έτσι ώστε να εμφανίζεται πρώτα το nav:

nav {
  τάξη: -1
}}
Το τελικό αποτέλεσμα. https://codepen.io/ohansemmanuel/full/brzJZz/

Η ιδιότητα παραγγελίας χρησιμοποιείται για την αναδιάταξη της θέσης των στοιχείων flex.

Όλα τα στοιχεία ευελιξίας μέσα σε ένα εμπορευματοκιβώτιο θα εμφανίζονται σε τιμές αυξανόμενης τάξης. Το στοιχείο flex με τις χαμηλότερες τιμές παραγγελίας εμφανίζεται πρώτα.

Όλα τα ευέλικτα στοιχεία έχουν προεπιλεγμένη τιμή παραγγελίας 0.

Η Διάταξη του Αγίου Γράμι (άλλη λύση)

Η προηγούμενη λύση χρησιμοποίησε ένα εύκαμπτο δοχείο ως το συνολικό δοχείο. Η διάταξη εξαρτάται σε μεγάλο βαθμό από το Flexbox.

Ας δούμε μια πιο "υγιή" προσέγγιση. Ρίξτε μια ματιά στο υποτιθέμενο τελικό αποτέλεσμα και πάλι:

Η διάταξη του ιερού γραμματισμού

η κεφαλίδα και το υποσέλιδο θα μπορούσαν να αντιμετωπίζονται ως στοιχεία μπλοκ. Χωρίς παρέμβαση, θα γεμίσουν το πλάτος του στοιχείου που τους περιέχει και θα στοιβάζονται από πάνω προς τα κάτω.


  
Header   
    
Άρθρο     

Με αυτήν την προσέγγιση, ο μόνος απαραίτητος εύκαμπτος περιέκτης θα ήταν ο κύριος.

Η μοναδική πρόκληση με αυτήν την προσέγγιση είναι ότι πρέπει να υπολογίσετε το ύψος του κύριου εαυτού σας. το κεντρικό τμήμα πρέπει να γεμίσει τον διαθέσιμο χώρο εκτός από τον χώρο που αναλαμβάνει η κεφαλίδα και το υποσέλιδο.

main {
  ύψος: calc (100vh - 40vh);
}}

Εξετάστε το μπλοκ κώδικα παραπάνω. Χρησιμοποιεί τη λειτουργία CSS Calc για να υπολογίσει το ύψος του κύριου.

Οποιοδήποτε κι αν είναι το χιλιομετρικό σας μήκος, το ύψος του κύριου πρέπει να είναι ίσο με το calc (100vh - ύψος κεφαλίδας - ύψος υποσέλιδου).

Όπως και στην προηγούμενη λύση, πρέπει να δώσετε κεφαλίδα και υποσέλιδο σε σταθερό ύψος. Στη συνέχεια προχωρήστε και ακολουθήστε την ίδια διαδικασία με την προηγούμενη λύση.

Μπορείτε να δείτε τα πραγματικά αποτελέσματα εδώ.

2 διατάξεις σελίδων

Δύο διατάξεις στήλης είναι αρκετά συνηθισμένες. Είναι επίσης εύκολα επιτυγχάνονται χρησιμοποιώντας το Flexbox.

2 διάταξη στήλης με πλευρική γραμμή και κύρια περιοχή περιεχομένου.

Εξετάστε την παρακάτω σήμανση:


   sidebar 
  
main

Ξεκινήστε το πλαίσιο μορφοποίησης Flexbox:

σώμα {
  οθόνη: flex;
}}

Δώστε κατά μέρος σταθερό πλάτος:

κατά μέρος {
   πλάτος: 20vw
}}

Τέλος, βεβαιωθείτε ότι ο κεντρικός υπολογιστής γεμίζει τον διαθέσιμο χώρο που διαθέτετε:

main {
  flex: 1
}}

Αυτό είναι σχεδόν όλα όσα υπάρχουν σε αυτό.

Παράδειγμα 5: Αντικείμενα μέσων με Flexbox

Τα αντικείμενα των μέσων ενημέρωσης είναι παντού. Από τα tweets στα μηνύματα στο Facebook, φαίνεται να είναι η επιλογή για τα περισσότερα σχέδια UI.

Δείγμα Tweet και δημοσίευση στο Facebook

Εξετάστε την παρακάτω σήμανση:

     
    

Header     

  

Όπως έχετε υποθέσει, το .media θα καθορίσει το πλαίσιο μορφοποίησης Flexbox:

.μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ {
   οθόνη: flex
}}

Εξ ορισμού, τα εύκαμπτα αντικείμενα ενός δοχείου είναι τεντωμένα κατά μήκος της κατακόρυφης ώστε να γεμίζουν το διαθέσιμο ύψος εντός του κάδου flex.

Βεβαιωθείτε ότι το σώμα .media καταλαμβάνει όλο τον διαθέσιμο χώρο:

.media-body {
   flex: 1
}}
Το πλαίσιο που βρίσκεται στα αριστερά εκτείνεται για να ταιριάζει με την διαθέσιμη οθόνη. Το σώμα των μέσων εκτύπωσης καταλαμβάνει τον υπόλοιπο οριζόντιο χώρο εντός του αντικειμένου μέσων (λευκό)

Ας φτιάξουμε το τεντωμένο κιβώτιο.

.μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ {
  ...
  ευθυγράμμιση-αντικείμενα: flex-start
}}
Τα στοιχεία flex ευθυγραμμίζονται τώρα με την αρχή του αντικειμένου μέσων. Η εικόνα τώρα παίρνει το μέγεθος της προεπιλογής. Όχι παράξενο τέντωμα :)

Και αυτό είναι.

Ένα ανατρεπόμενο αντικείμενο μέσων

Ένα ανατρεπόμενο αντικείμενο μέσων έχει την εικόνα στην άλλη πλευρά (δεξιά) του αντικειμένου μέσων

Δεν έχετε την αλλαγή της σειράς πηγαίου κώδικα html για να δημιουργήσετε ένα ανατρεπόμενο αντικείμενο μέσων.

Απλά ανακατασκευάστε τα ευέλικτα στοιχεία όπως:

.media-object {
   σειρά: 1
}}

Αυτό θα εμφανίσει την εικόνα μετά την επικεφαλίδα .media-body και media-heading

Ένα αντικείμενο έμφυλου μέσου

Μπορεί ακόμη να συνεχίσετε να φωτίζετε το αντικείμενο Media. Χωρίς να αλλάξουμε κανένα από τα στυλ CSS που έχουμε γράψει.

     
    

Header     

              

         
        

Header         

            

Δουλεύει!

Αντικείμενα μέσων που είναι ενσωματωμένα σε αντικείμενα μέσων.

Ένα αντικείμενο Unicode Media

Φαίνεται ότι δεν περιοριζόμαστε μόνο σε εικόνες.

Χωρίς να αλλάξετε κανένα από τα γραπτά στυλ CSS, μπορείτε να έχετε ένα unicode που αντιπροσωπεύει την εικόνα.

  
& # x1F60E;   
    

Header     

  

Έχω αγκαλιάσει σε ένα emoji εκεί.

Αντικείμενο μέσου με υποστήριξη emoji.

Η απομάκρυνση του img και η αντικατάστασή του με ένα div που περιέχει το επιθυμητό unicode αποδίδει την παραπάνω έξοδο. Μπορεί να τραβήξετε εδώ μερικά ακόμα emoji unicodes.

Ένα αντικείμενο μέσων HTML οντότητας

Μπορεί να έχετε χρησιμοποιήσει επίσης οντότητες html όπως φαίνεται παρακάτω.

  
και τηλέφωνο;   
    

Header     

  

Η οντότητα html που χρησιμοποιείται σε αυτό το παράδειγμα είναι & phone; και μπορεί να δείτε το αποτέλεσμα παρακάτω.

html οντότητα, & τηλέφωνο;

Μπορείτε να δείτε το αποτέλεσμα αυτών των παραδειγμάτων σε αυτό το CodePen.

Παράδειγμα 6: Πώς να δημιουργήσετε στοιχεία μορφής με το Flexbox

Είναι δύσκολο να βρείτε οποιαδήποτε ιστοσελίδα που δεν έχει μορφή ή δύο αυτές τις μέρες.

μορφές εισόδου προσαρτημένες και προσθεμένες με άλλα στοιχεία

Εξετάστε την παρακάτω σήμανση:

     

Αυτό το παράδειγμα δείχνει τον συνδυασμό της ευθυγράμμισης των πεδίων εισαγωγής με κουμπιά ή διαστήματα κειμένου. Η λύση είναι και πάλι αρκετά εύκολη με το Flexbox.

Ξεκινήστε το πλαίσιο μορφοποίησης Flexbox:

.form {
  οθόνη: flex
}}

Βεβαιωθείτε ότι το πεδίο εισαγωγής καταλαμβάνει το διαθέσιμο χώρο:

.form__field {
   flex: 1
}}

Τέλος, μπορείτε να στυλιστούν τα προσαρτημένα ή προπαρασκευασμένα κείμενα και κουμπιά, ανεξάρτητα από τον τρόπο που θεωρείτε κατάλληλα.

.form__item {
  ...
}}

Μπορείτε να δείτε το πλήρες αποτέλεσμα αυτού του παραδείγματος σε αυτό το CodePen.

Παράδειγμα 7: Πώς να δημιουργήσετε μια διάταξη εφαρμογής για κινητά με το Flexbox

Σε αυτό το παράδειγμα, θα σας καθοδηγήσω παρακάτω τη διάταξη της εφαρμογής για κινητά:

Η διάταξη της εφαρμογής για κινητά που θα κατασκευάσουμε με το Flexbox

Ωστόσο, αυτό το παράδειγμα είναι διαφορετικό.

Θα σας εξηγήσω τη διαδικασία κατασκευής της φορητής διάταξης σε ψευδοκώδικα και θα προχωρήσετε στη δημιουργία του.

Αυτό θα είναι μια μορφή πρακτικής για να χυθούν τα χέρια σας.

Βήμα 1

Απογυμνώστε τη διάταξη από το iPhone και το έχουμε:

Η διάταξη των barebones

Βήμα 2

Καθορίστε το σώμα που περιέχει ως εύκαμπτο δοχείο

Ξεκινήστε το πλαίσιο μορφοποίησης Flexbox ως ευέλικτο δοχείο.

Βήμα 3

Από προεπιλογή, η καμπύλη ευκαμψίας ενός κάδου flex είναι ρυθμισμένη σε σειρά. Σε αυτή την περίπτωση, αλλάξτε τη σε στήλη.

Αλλάξτε την προεπιλεγμένη κατεύθυνση κάμψης για να έχετε 3 παιδικά στοιχεία γνωστά ως flex-items

Βήμα 4

Δώστε το στοιχείο 1 και 3 σταθερά ύψη όπως το ύψος: 50px.

Βήμα 5

Το στοιχείο 2 πρέπει να έχει ένα ύψος που συμπληρώνει τον διαθέσιμο χώρο. Χρησιμοποιήστε το flex-grow ή το εύκαμπτο flex flex: 1.

Βήμα 6

Τέλος, αντιμετωπίζετε κάθε μπλοκ περιεχομένου ως αντικειμενικό μέσο όπως φαίνεται σε ένα παλαιότερο παράδειγμα.

Αντιμετωπίστε τα μπλοκ του περιεχομένου ως αντικείμενα μέσων.

Ακολουθήστε τα έξι παραπάνω βήματα για να δημιουργήσετε με επιτυχία τη διάταξη της εφαρμογής για κινητά.

Θέλετε να γίνετε Pro;

Κατεβάστε το ελεύθερο φύλλο CSS Grid cheat μου και επίσης να πάρετε δύο ποιοτικά διαδραστικά μαθήματα Flexbox δωρεάν!

Αποκτήστε το δωρεάν φύλλο CSS Grid Cheat + Δύο ποιοτικά μαθήματα Flexbox δωρεάν!

Πάρτε τους τώρα