נכס ה-CSS gap
כאן בשביל מנועי ה-CSS Flexbox ו-Multi-Column של Chromium.
פער ב-CSS
הערך gap
הוא זרימה יחסית, כלומר הוא משתנה באופן דינמי בהתאם לכיוון של זרימת התוכן. לדוגמה, gap
יתאים אוטומטית את הערכים השונים של writing-mode
או direction
שהגדרת למשתמשים הבינלאומיים. דרך זו מקלה משמעותית על אתגרי הריווח עבור הרכיב ומחבר ה-CSS. פחות התאמה של הקוד.
תאימות דפדפן
Usage
gap
מקבל כל אורך או אחוז של CSS כערך.
.gap-example {
display: grid;
gap: 10px;
gap: 2ch;
gap: 5%;
gap: 1em;
gap: 3vmax;
}
אפשר לציין רווח באורך 1, שישמש גם לשורה וגם לעמודה.
.grid { display: grid; gap: 10px; }
.grid { display: grid; row-gap: 10px; column-gap: 10px; }
אפשר להקצות שני אורכים לרווח, שישמשו כשורה ועמודה.
.grid { display: grid; gap: 10px 5%; }
.grid { display: grid; row-gap: 10px; column-gap: 5%; }
Flexbox gap
לפני שהחברה gap
פעלה ב-Flexbox, האסטרטגיות כללו שולי רווח שליליים, סלקטורים מורכבים, סלקטורים מסוג :last
או :first
, או אמצעים אחרים לניהול המרחב
של קבוצת צאצאים שנפרסה באופן דינמי ועטיפה.
ניסיונות קודמים
אלו הדפוסים שאנשים השתמשו בהם כדי ליצור ריווח דמוי-פער.
.layout > :not(:last-child) { margin-bottom: 10px; margin-right: 10px; }
.layout > * + * { margin-bottom: 10px; margin-right: 10px; }
אבל האפשרויות שלמעלה לא תחליף מלא ל-gap
, ולרוב צריך לבצע התאמות ב-@media
או ב-:lang()
כדי להביא בחשבון תרחישי אריזה, מצבי כתיבה או כיוונים.
הוספה של שאילתת מדיה אחת או שתיים לא נראית כל כך גרועה, אבל הן יכולות להוביל ולהוביל ללוגיקת פריסה מורכבת.
כוונת המחבר הקודם הייתה שאף אחד מפריטי הצאצא לא ייגע.
הנפילה: פער
.layout {
display: flex;
gap: 10px;
}
בשתי הדוגמאות הראשונות (בלי Flexbox gap
), הילדים מטורגטים ומוקצים ריווח מאלמנטים אחרים. בדוגמה של פער הנפילה, הקונטיינר הוא הבעלים של הריווח. כל ילד יכול לשחרר את עצמו מהנטל, תוך כדי ריכוז הבעלות על הרווחים. מודל העקביות יהיה פשוט יותר. סידור מחדש, שינוי של אזורי תצוגה, הסרת רכיבים, צירוף רכיבים חדשים וכו', והריווח נשאר עקבי. בלי סלקטורים חדשים, בלי שאילתות מדיה חדשות, רק רווח.
עדכונים בכלי הפיתוח ל-Chromium
בעקבות העדכונים האלה, אנחנו מבצעים שינויים בכלי הפיתוח ל-Chromium, שימו לב איך החלונית סגנונות
מטפלת עכשיו ב-grid-gap
וב-gap
👍
כלי הפיתוח תומכים גם ב-grid-gap
וגם ב-gap
, כי gap
הוא בעצם כינוי לתחבירים הקודמים.
פוטנציאל לפריסה חדשה
עם gap
Flexbox, לנו יש הרבה יותר נוח. אנחנו מקבלים גישה לפריסות מתקדמות,
עם מרווח מושלם ובעלות משמעות. בסרטון ובדוגמת הקוד הבאה, רשת Grid לא יכולה להשיג את הפריסה ש-Flexbox יכולה. הרשת חייבת לכלול שורות ועמודות זהות, גם אם הן מוקצות באופן פנימי.
בנוסף, שימו לב שהמרווח בין ילדים הוא דינמי כאשר הם עוטפים אותו באופן מהותי. שאילתות מדיה לא יכולות לזהות גלישת טקסט בצורה כזו כדי לבצע התאמות חכמות.
חברת Flexbox gap
יכולה, ותעשה זאת עבורך בכל הבינלאומיות.
מרובה עמודות gap
בנוסף ל-Flexbox שתומכת בתחביר gap
, פריסות מרובות-עמודות תומכות גם בתחביר gap
הקצר יותר.
article {
column-width: 40ch;
column-gap: 5ch;
gap: 5ch;
}
יפה מאוד.