Κοινή χρήση τεχνολογίας

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Σε CSS Grid Layout (διάταξη πλέγματος) και Flexbox (ευέλικτη διάταξη πλαισίου),gap είναι μια συντομευμένη ιδιότητα που ορίζει το μέγεθος τόσο του κενού γραμμής (αυλάκι) όσο και του κενού στηλών (συχνά αποκαλείται "κενό μεταξύ αξόνων" στο Flexbox).Αυτή η ιδιότητα απλοποιεί σημαντικά την προηγούμενη ανάγκη να την ορίσετε ξεχωριστάrow-gap(ή grid-row-gap σε παλαιού τύπου Πλέγμα CSS) καιcolumn-gap(ή grid-column-gap) δυσκίνητη διαδικασία.

Χρησιμοποιείται στη διάταξη πλέγματος

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

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三个等宽的列 */
  gap: 20px; /* 同时设置行和列间隙为20px */
  /* 或者更具体地 */
  /* gap: 20px 30px; /* 第一个值设置行间隙，第二个值设置列间隙 */
}
1
2
3
4
5
6
7

Χρησιμοποιείται στο Flexbox

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

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 允许flex项换行 */
  gap: 10px; /* 同时设置主轴和交叉轴上的间隙为10px */
  /* 或者更具体地 */
  /* row-gap: 10px; /* 仅在需要时设置行间隙 */
  /* column-gap: 15px; /* 仅在需要时设置列间隙（或交叉轴间隙），但这在Flexbox中通常不太常见 */
}
1
2
3
4
5
6
7
8

Παρακαλώ σημειώστε,gap Η τιμή του χαρακτηριστικού μπορεί να είναι ένα μήκος (π.χ.px、em、vw κ.λπ.), ποσοστό ή οποιοδήποτε άλλοrow-gapκαιcolumn-gap Αποδεκτές νομικές αξίες.Επιπλέον, εάν χρειάζεστεrow-gapκαιcolumn-gapΓια να ορίσετε διαφορετικές τιμές, μπορείτε να μεταβιβάσετε αυτές τις δύο τιμές ωςgapΗ ιδιότητα παρέχεται ως δύο ορίσματα, η πρώτη τιμή αντιστοιχεί σε ένα κενό γραμμής και η δεύτερη τιμή αντιστοιχεί σε ένα κενό στήλης (στο Πλέγμα) ή ένα κενό σταυρού αξόνων (στο Flexbox, αν και αυτό είναι λιγότερο συνηθισμένο).

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