Chromium מגיע עם פער Flexbox

תכונת ה-CSS gap מיועדת למנועי הפריסה של Chromium עם CSS Flexbox ועם כמה עמודות.

Adam Argyle

David Grogan

CSS Gap

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

תאימות דפדפן

שימוש

אפשר להשתמש ב-gap כערך של כל אורך או אחוז ב-CSS.

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

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

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

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

אפשר להעביר ל-Gap 2 אורכי מחרוזות, שישמשו לשורה ולעמודה.

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

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

Flexbox gap

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

ניסיונות קודמים

אלה הדפוסים שבהם אנשים השתמשו כדי ליצור רווחים דמויי פערים.

.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}

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

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

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

התרופה: gap

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

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

עדכונים של Chromium DevTools

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

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

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

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

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

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

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

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

רדי יפה.