Chromium מגיע עם פער Flexbox

המאפיין gap של CSS מיועד למנועי הפריסה של CSS Flexbox ושל Multi-Column ב-Chromium.

Adam Argyle

David Grogan

CSS Gap

מונח מפתח: gap הוא הריווח בין רכיבי צאצא. יכול להיות ששמעתם על סוג כזה של ריווח שנקרא 'שוליים פנימיים' או 'רווחים'. הרווח הוא רק במקומות שבהם הקצוות של תיבת הצאצאים נוגעים.

‫gap הוא יחסי לזרימה, כלומר הוא משתנה באופן דינמי בהתאם לכיוון זרימת התוכן. לדוגמה, המערכת תתאים אוטומטית את הערך gap לערכים השונים של writing-mode או direction שהגדרתם למשתמשים הבינלאומיים. השימוש בשיטה הזו מקל משמעותית על בעיות של ריווח עבור רכיב ויוצר CSS. הקוד מצטמצם עוד יותר.

פער שמדגים תמיכה בלוקליזציה, כי הוא מטפל בשינויים בכיוון ובמצב הכתיבה: Codepen | Tweet

תאימות דפדפן

Browser Support

• 57
• 16
• 52
• 10.1

Source

שימוש

‫gap מקבל כל length של CSS או percentage כערך.

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}

אפשר להעביר לפרמטר Gap אורך אחד, שישמש גם לשורה וגם לעמודה.

כתב מקוצר

.grid {
  display: grid;
  gap: 10px;
}

הגדרת שורות ועמודות ביחד בבת אחת

מורחב

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}

אפשר להעביר ל-Gap שני ערכים של אורך, שישמשו לשורה ולעמודה.

כתב מקוצר

.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;
}

lobotomized owl

.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}

מקור

עם זאת, האפשרויות שלמעלה לא מחליפות באופן מלא את gap, ולעתים קרובות צריך לבצע התאמות של @media או של :lang() כדי להתאים אותן למקרים של גלישת טקסט, מצבי כתיבה או כיוון. הוספה של שאילתת מדיה אחת או שתיים לא נראית בעייתית, אבל הן יכולות להצטבר ולהוביל ללוגיקה מורכבת של פריסה.

הכוונה האמיתית של המחבר בדוגמה שלמעלה הייתה שאף אחד מפריטי הצאצא לא יגע.

התרופה: gap

.layout {
  display: flex;
  gap: 10px;
}

הערה: הבעלות על הרווח עוברת מהצאצא אל ההורה

בדוגמאות הראשונות (בלי Flexbox gap), הילדים ממוקדים ומוקצים להם רווחים מרכיבים אחרים. בדוגמה של הפער בין המילים, הקונטיינר הוא הבעלים של הרווח. כל ילד יכול להקל על עצמו את העומס, וגם לרכז את הבעלות על המרווח. הפשטת העקביות. לשנות את הסדר, לשנות את אזורי התצוגה, להסיר רכיבים, להוסיף רכיבים חדשים וכו', והריווח נשאר עקבי. אין סלקטורים חדשים, אין שאילתות מדיה חדשות, רק רווח.

עדכונים בכלי הפיתוח ל-Chromium

העדכונים האלה כוללים שינויים בכלי הפיתוח ל-Chromium. שימו לב איך החלונית Styles מטפלת עכשיו ב-grid-gap וב-gap 👍

בכלי הפיתוח מוצגים גם grid-gap וגם gap, כאשר gap מוצג מתחת ל-grid-gap כדי לאפשר ל-CSS להשתמש בתחביר העדכני ביותר.

כלי הפיתוח תומכים גם ב-grid-gap וגם ב-gap, כי gap הוא בעצם כינוי לתחביר הקודם.

פוטנציאל לפריסה חדשה

עם Flexbox gap, אנחנו לא רק משפרים את הנוחות. אנחנו מאפשרים לכם ליצור פריסות חזקות, עם מרווחים מושלמים ועם מאפיינים מובנים. בסרטון ובדוגמת הקוד הבאה, Grid לא יכול להשיג את הפריסה ש-Flexbox יכול להשיג. ברשת חייבות להיות שורות ועמודות שוות, גם אם הן מוקצות באופן מהותי.

ציוץ

שימו לב גם למרווחים הדינמיים בין האלמנטים כשהם מסתיימים באופן טבעי כמו בדוגמה. שאילתות מדיה לא יכולות לזהות גלישה כזו כדי לבצע התאמות חכמות. ‫Flexbox gap יכול לעשות את זה בשבילכם בכל הלוקליזציות.

מרובה-עמודות gap

בנוסף לתמיכה של Flexbox בתחביר gap, פריסות מרובות עמודות תומכות גם בתחביר המקוצר gap.

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

מגניב.