Χάσμα - CSS-Κόλπα

Η ιδιότητα διακένου στο CSS είναι συντομογραφία για row-gapκαι column-gap, καθορίζοντας το μέγεθος των υδρορροών, που είναι ο χώρος μεταξύ σειρών και στηλών εντός πλέγματος, ευέλικτων και πολλών στηλών διατάξεων.

/* Grid layout */ .container ( display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; ) /* Flex layout */ .container ( display: flex; gap: 10%; ) /* Multi-column layout */ .container ( column-count: 5; gap: 20px; )

Χρησιμοποιήστε το ρυθμιστικό στην παρακάτω επίδειξη για να δείτε την gapιδιότητα σε δράση:

Σύνταξη

gap δέχεται μία ή δύο τιμές:

• Μια μεμονωμένη τιμή ορίζει row-gapκαι τα δύο και column-gapτην ίδια τιμή.
• Όταν χρησιμοποιούνται δύο τιμές, το πρώτο θέτει το row-gapκαι το δεύτερο ορίζει το column-gap.

.container ( gap: 1rem; /* Is equivalent to: * row-gap: 1rem; * column-gap: 1rem */ gap: 10px 15%; /* Is equivalent to: * row-gap: 10px; * column-gap: 15%; */ )

Η προδιαγραφή για την ενότητα CSS Grid Layout Module καθόρισε το διάστημα μεταξύ των κομματιών πλέγματος χρησιμοποιώντας την grid-gapιδιότητα. gapπροορίζεται να το αντικαταστήσει έτσι ώστε τα κενά να μπορούν να καθοριστούν σε πολλές μεθόδους διάταξης CSS, όπως το flexbox, αλλά grid-gapπρέπει ακόμη να χρησιμοποιηθεί σε περιπτώσεις όπου ένα πρόγραμμα περιήγησης μπορεί να έχει εφαρμόσει, grid-gapαλλά δεν έχει ακόμη ξεκινήσει να υποστηρίζει τη νεότερη gapιδιότητα.

Αξίες

gap αποδέχεται τις ακόλουθες τιμές:

• normal: (Προεπιλογή) Το πρόγραμμα περιήγησης θα καθορίσει μια χρησιμοποιημένη τιμή 1em για διάταξη πολλών στηλών και 0px για όλα τα άλλα περιβάλλοντα διάταξης (π.χ. πλέγμα και ευκίνητο).
• : Οποιαδήποτε έγκυρη και μη-αρνητικό μήκος CSS, όπως px, em, remκαι %, μεταξύ άλλων.
• : Το μέγεθος του κενού ως μη αρνητική ποσοστιαία τιμή σε σχέση με τη διάσταση του στοιχείου. (Δείτε παρακάτω για λεπτομέρειες.)
• initial: Εφαρμόζει την προεπιλεγμένη ρύθμιση της ιδιότητας, η οποία είναι normal.
• inherit: Υιοθετεί την τιμή διακένου του γονέα.
• unset: Αφαιρεί το ρεύμα gapαπό το στοιχείο.

Ποσοστά στις ιδιότητες κενού

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

Με άλλα λόγια, όταν το πρόγραμμα περιήγησης γνωρίζει το μέγεθος του κοντέινερ, μπορεί να υπολογίσει την ποσοστιαία τιμή του gap. Για παράδειγμα, όταν το ύψος του κοντέινερ είναι 100px και το gapέχει οριστεί σε 10%, το πρόγραμμα περιήγησης γνωρίζει ότι το 10% των 100px είναι 10px.

Αλλά όταν το πρόγραμμα περιήγησης δεν γνωρίζει το μέγεθος, θα αναρωτιέται, "10% του τι;" Σε αυτές τις περιπτώσεις, gapσυμπεριφέρεται διαφορετικά με βάση τον τύπο διάταξης.

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

Σε αυτό το demo, το ύψος του κοντέινερ δεν είναι καθορισμένο. Δείτε τι συμβαίνει όταν αυξάνετε το gapμέγεθος. Στη συνέχεια, ορίστε τις gapμονάδες pixel και δοκιμάστε ξανά:

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

Χρήση της λειτουργίας calc () με κενό

Μπορείτε να χρησιμοποιήσετε τη calc()συνάρτηση για να καθορίσετε το μέγεθος του, gapαλλά, κατά τη στιγμή αυτής της γραφής, δεν υπάρχει υποστήριξη για αυτό στο Safari και το iOS.

.flex-layout ( display: flex; gap: calc(5vh + 5px) calc(5vw + 5px); ) 
 .grid-layout ( display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5vmin + 5px); )

Παραδείγματα

Η gapιδιοκτησία έχει σχεδιαστεί για χρήση σε πλέγμα, ευέλικτες και πολλαπλές στήλες. Ας δούμε μερικά παραδείγματα.

Διάταξη πλέγματος

Στο παρακάτω demo, μπορείτε να δείτε gapπου χρησιμοποιούνται για τον προσδιορισμό του row-gapκαι column-gapτις ιδιότητες σε ένα δοχείο πλέγμα, για τον καθορισμό των υδρορροών μεταξύ γραμμών πλέγματος και των στηλών του δικτύου, αντίστοιχα:

Ευέλικτη διάταξη

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

Εδώ column-gapχρησιμοποιείται σε κατεύθυνση σειράς:

Εδώ row-gapχρησιμοποιείται σε κατεύθυνση στήλης:

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

Εδώ είναι row-gapσε κατεύθυνση σειράς:

Εδώ είναι column-gapσε κατεύθυνση στήλης:

Διάταξη πολλών στηλών

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

Όπως μπορείτε να δείτε στην επόμενη επίδειξη, αν και η gapιδιότητα έχει τιμή 2rem, διαχωρίζει μόνο τα στοιχεία οριζόντια αντί για τις δύο κατευθύνσεις, καθώς εργαζόμαστε σε στήλες:

Όσο περισσότερα ξέρετε…

Υπάρχουν μερικά πράγματα που αξίζει να σημειωθεί σχετικά με τη συνεργασία με την gapιδιοκτησία.

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

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

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

Όμως, αν θέλετε να έχετε χώρο γύρω από τα αντικείμενα κατά τη χρήση gap, τοποθετήστε paddingγύρω από το δοχείο ως εξής:

.container ( display: flex; gap: 1rem; padding: 1rem; )

Το μέγεθος των υδρορροών δεν είναι πάντα ίσο με την τιμή του κενού

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

Στο παρακάτω παράδειγμα, είμαστε καθορισμό 1em gap, αλλά, όπως μπορείτε να δείτε, υπάρχει πολύ περισσότερος χώρος μεταξύ των στοιχείων, που προκαλείται από τη χρήση των κατανεμημένων ευθυγραμμίσεις, όπως justify-contentκαι align-content:

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

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

Διάταξη πλέγματος

ΙΕ	Ακρη	Firefox	Χρώμιο	Σαφάρι	ΛΥΡΙΚΗ ΣΚΗΝΗ
Οχι	16+	61+	66+	12+	53+

iOS Safari	Opera Mobile	Πρόγραμμα περιήγησης Android	Chrome για Android	Firefox για Android
12+	Οχι	81+	84+	68+

Διάταξη πλέγματος με τιμές calc ()

ΙΕ	Ακρη	Firefox	Χρώμιο	Σαφάρι	ΛΥΡΙΚΗ ΣΚΗΝΗ
Οχι	84+	79+	84+	Οχι	69+

iOS Safari	Opera Mobile	Πρόγραμμα περιήγησης Android	Chrome για Android	Firefox για Android
Οχι	Οχι	81+	84+	68+

Διάταξη πλέγματος με ποσοστιαία τιμή

ΙΕ	Ακρη	Firefox	Χρώμιο	Σαφάρι	ΛΥΡΙΚΗ ΣΚΗΝΗ
Οχι	84+	79+	84+	Οχι	69+

iOS Safari	Opera Mobile	Πρόγραμμα περιήγησης Android	Chrome για Android	Firefox για Android
Οχι	Οχι	81+	84+	68+

Ευέλικτη διάταξη

Η προδιαγραφή για χρήση gapμε το flexbox βρίσκεται επί του παρόντος σε κατάσταση προσχεδίου εργασίας.

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

Επιφάνεια εργασίας

Χρώμιο	Firefox	ΙΕ	Ακρη	Σαφάρι
84	63	Οχι	84	ΤΡ

Κινητό / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	Οχι	Οχι

Διάταξη πολλών στηλών

ΙΕ	Ακρη	Firefox	Χρώμιο	Σαφάρι	ΛΥΡΙΚΗ ΣΚΗΝΗ
Οχι	84+	79+	84+	Οχι	69+

iOS Safari	Opera Mobile	Πρόγραμμα περιήγησης Android	Chrome για Android	Firefox για Android
Οχι	Οχι	81+	84+	68+

Περισσότερες πληροφορίες

• CSS Box Alignment Module Level 3
• Το Chromium προσγειώνει το κενό Flexbox (Εισιτήριο # 761904)
• Κατάσταση χαρακτηριστικών WebKit CSS

Σχετιζομαι με

• Διάταξη πλέγματος
• Διάταξη Flexbox
• Διάταξη πολλών στηλών