Εισαγωγή στη λειτουργική μονάδα CSS Layout

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

Η διάταξη του πλέγματος δεν εξαρτάται από τη θέση των στοιχείων στη σήμανση, επομένως, μπορείτε ανακατέψτε τις τοποθετήσεις στοιχείων σε σήμανση χωρίς να αλλάξει η διάταξη. Στο μοντέλο πλέγματος, ένα στοιχείο περιέκτη δικτύου είναι διαιρούμενο σε στήλες πλέγματος και σειρές (συλλογικά γνωστό ως πλέγμα πλέγματος) με γραμμές πλέγματος. Τώρα ας δούμε πώς να δημιουργήστε ένα δείγμα πλέγματος.

Υποστήριξη προγράμματος περιήγησης

Από τη σύνταξη αυτού του άρθρου, το CSS Grid Module υποστηρίζεται μόνο από τον πιο πρόσφατο IE browser και Edge. Το δίκτυο CSS είναι σε πειραματικό στάδιο στα άλλα μεγάλα προγράμματα περιήγησης στα οποία πρέπει να κάνετε ενεργοποιήστε την υποστήριξη με μη αυτόματο τρόπο:

• Firefox: Πατήστε το πλήκτρο Shift + F2, πληκτρολογήστε την ακόλουθη εντολή στη γραμμή εισόδου GCLI που εμφανίστηκε στο κάτω μέρος του προγράμματος περιήγησης: pref set layout.css.grid.enabled true.
• Χρώμιο: Περιηγηθείτε στο chrome: // flags URL και ενεργοποίηση Πειραματικές δυνατότητες πλατφόρμα Web.

Όλες οι μεγάλες υποστήριξη του προγράμματος περιήγησης είναι πιθανό να έρχονται από τις αρχές / μέσα του 2017.

Ένα πλέγμα δειγμάτων

Προς το μετατρέψτε ένα στοιχείο σε ένα δοχείο δικτύου μπορείς να χρησιμοποιήσεις ένα από αυτά τα τρία απεικόνιση ιδιότητες:

1. εμφάνιση: πλέγμα; - το στοιχείο είναι μετατραπεί σε δοχείο δικτύου πλέγματος
2. εμφάνιση: inline-πλέγμα; - το στοιχείο είναι μετατραπεί σε ένα δοχείο με ενσωματωμένο δίκτυο
3. εμφάνιση: υποπεριοχή - εάν το στοιχείο είναι στοιχείο πλέγματος είναι μετατρέπεται σε υποπεριοχή που αγνοεί το πρότυπο πλέγματος και τις ιδιότητες κενού δικτύου

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

Θα δημιουργήσουμε ένα πλέγμα με πέντε τμήματα (περιοχές πλέγματος): πάνω, κάτω, αριστερά, δεξιά και στο κέντρο. Το HTML αποτελείται από πέντε divs μέσα σε ένα δοχείο div.

 
 
Μπλουζα
 
Αριστερά
 
κέντρο
 
σωστά
 
Κάτω μέρος
 
 

Στο CSS, το πλέγμα-πρότυπο-περιοχές ιδιοκτησία ορίζει ένα πλέγμα με διαφορετικές περιοχές πλέγματος. Στην αξία του, μια συμβολοσειρά αντιπροσωπεύει μια σειρά πλέγματος και κάθε έγκυρο όνομα μέσα σε μια συμβολοσειρά αντιπροσωπεύει μια στήλη. Προς το δημιουργήστε ένα κενό κελί πλέγματος πρέπει να χρησιμοποιήσετε το τελεία (.) χαρακτήρα μέσα σε μια σειρά συμβολοσειρών.

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

 .πλέγμα-δοχείο πλάτος: 500px; ύψος: 500px; εμφάνιση: πλέγμα; πλέγμα-πρότυπο-περιοχές: "πάνω από πάνω" "αριστερά στο κέντρο δεξιά" "κάτω κάτω κάτω"?  .grid-top περιοχή πλέγματος: κορυφή;  .grid-bottom περιοχή πλέγματος: κάτω.  .grid-left περιοχή πλέγματος: αριστερά.  .grid-right πλέγμα-περιοχή: δεξιά;  .grid-center πλέγμα-περιοχή: κέντρο;  

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

Τώρα πρέπει να εκχωρήσετε διαστάσεις σε αυτές τις σειρές και στήλες. ο πλέγμα-πρότυπο-στήλες και πλέγμα-πρότυπο-σειρές ιδιότητες καθορίστε το μέγεθος της διαδρομής πλέγματος (σειρά ή στήλη).

 .πλέγμα-δοχείο πλάτος: 500px; ύψος: 500px; εμφάνιση: πλέγμα; πλέγμα-πρότυπο-περιοχές: "πάνω από πάνω" "αριστερά στο κέντρο δεξιά" "κάτω κάτω κάτω"? πλέγμα-πρότυπο-στήλες: 100px auto 100px; πλέγμα-πρότυπο-σειρές: 50px auto 150px;  

Έτσι φαίνεται τώρα το πλέγμα CSS (με μερικές επιπλέον μορφές):

Διάστημα μεταξύ στοιχείων πλέγματος

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

 .πλέγμα-δοχείο πλάτος: 500px; ύψος: 500px; εμφάνιση: πλέγμα; πλέγμα-πρότυπο-περιοχές: "πάνω από πάνω" "αριστερά στο κέντρο δεξιά" "κάτω κάτω κάτω"? πλέγμα-πρότυπο-στήλες: 100px auto 100px; πλέγμα-πρότυπο-σειρές: 50px auto 150px; πλέγμα-διάκενο: 5px 5px;  

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

Ευθυγραμμίστε το περιεχόμενο και τα στοιχεία του πλέγματος

ο justify-content ιδιοκτησίας του δοχείου δικτύου (.πλέγμα-δοχείο) ευθυγραμμίζει το περιεχόμενο του δικτύου κατά μήκος του εσωτερικού άξονα (οριζόντιος άξονας) και το ακίνητο ευθυγράμμιση-περιεχόμενο, ευθυγραμμίζει το περιεχόμενο του δικτύου κατά μήκος του άξονα του μπλοκ (κάθετος άξονας). Και οι δύο ιδιότητες μπορεί να έχει μία από αυτές τις τιμές: αρχή, τέλος, κέντρο, διάστημα μεταξύ, γύρω-γύρω και space-ομοιόμορφα.

Όπου είναι εφικτό, το μέγεθος του κομματιού (σειράς ή στήλης) συρρικνώνεται για να ταιριάζει στο περιεχόμενο όταν ευθυγραμμιστεί. Ρίξτε μια ματιά στα screenshots των περιεχομένων του δικτύου ευθυγραμμισμένες με διαφορετικές τιμές παρακάτω.

justify-content: start;

justify-content: end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

ευθυγράμμιση-περιεχόμενο: έναρξη?

ευθυγράμμιση-περιεχόμενο: τέλος;

ευθυγράμμιση-περιεχόμενο: κέντρο

ευθυγράμμιση-περιεχόμενο: διάστημα-μεταξύ;

ευθυγράμμιση-περιεχόμενο: χώρος-γύρω?

ευθυγράμμιση-περιεχόμενο: χώρος-ομοιόμορφα?

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

Προς το ευθυγραμμίστε μεμονωμένα αντικείμενα μέσα στις περιοχές πλέγματος, Χρησιμοποιήστε το άλλο ζεύγος ιδιοτήτων ευθυγράμμισης: justify-items και στοιχεία ευθυγράμμισης. Και οι δύο μπορούν να έχουν μία από αυτές τις αξίες: αρχή, τέλος, κέντρο, βασική γραμμή (ευθυγραμμίστε στοιχεία κατά μήκος της γραμμής βάσης της περιοχής) και τέντωμα (τα αντικείμενα γεμίζουν ολόκληρη την περιοχή τους).