שימוש ב CSS Gap עם Flexbox

CSS Flexbox כמו גם CSS Grid הם כלים מצויינים בכדי לנהל מתווה (layout) באתרים. flexbox דואגת לעימוד חד מימדי בצורה נפלאה, ו CSS Grid פותר לנו את עניין העימוד הדו-מימדי בעזרת עמודות ושורות.

לעיתים תכופות אנו מעוניינים להוסיף ריווח בין האלמנטים במתווה שלנו (ו margins הם כבר לא התשובה). בפוסט זה נראה כיצד להוסיף ריווח בין flex items תוך שימוש בתכונת ה CSS בשם gap, הלא היא הקיצור של התכונות row-gap & column-gap.

רבים מכירים אותה מ CSS grid, אך לא הרבה מאיתנו משתמשים בתכונה זו עבור קונטיינר מסוג flex, ואנו צריכים, בטח ובטח כשתמיכת הדפדפנים ב gap היא די רחבה כפי שתראו בסוף הפוסט.

ולמרות הנאמר על תמיכת הדפדפנים הרחבה, נכון לזמן כתיבת פוסט זה התכונה אינה נתמכת ללא polyfill במרבית הדפדפנים ב iOS (מובייל). עם זאת, לא אשנה את הפוסט ואת הנאמר כי אני מאמין שהתמיכה לאלו תגיע ממש בקרוב.

ריווח אלמנטים ב Flex Container עם CSS Gap

אז כפי שציינו, CSS Gap עובד ב CSS Grid אך ישנם מצבים רבים בהם יש לנו אלמנטים הצריכים ריווח ללא גריד מוגדר, קונטיינר מסוג flex למשל.

<div class="flex-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

.flex-gap {
  display: flex;
  flex-wrap: wrap;
}

התכונה flex-wrap תאפשר לאותם flex items לגלוש שורה בהתאם לרוחב אלמנט האב.

זה נראה כך:

וכאשר אנו מצמצים את הרוחב של אלמנט האב (הקונטיינר) מפאת השימוש ב flex-wrap:

ריווח עם margins

אם נרצה להוסיף ריווח בין ה flex-items נוכל פשוט להוסיף margin לכל אחד מהאלמנטים:

.flex-gap {
  display: flex;
  flex-wrap: wrap;
}

.flex-gap > div {
  margin: 6px;
}

וכך זה נראה כשאנו מצמצים את הרוחב של אלמנט האב:

אז כפי שאתם רואים ה margin עובד אך אין לו את אותה התנהגות ואותו ריווח שיספק CSS Gap. שימו לב כי יש אקסטרה ריווח בדוגמה האחרונה סביב האלמנטים.

כמו כן חשוב לציין את margin מיישמים על flex items כשאת התכונה gap מיישמים על ה flex container.

ריווח עם gap

עם ריווח של CSS Gap אנו נקבל מצב בו הריווח שנגדיר ירווח אך ורק בין האלמנטים עצמם ולא נקבל למשל גם ריווח יחסי לקונטיינר עצמו. הדוגמה הבאה תבהיר על מה אני מדבר…

.flex-gap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

וזה נראה כך ויפה מתמיד:

ניתן כמובן לכתוב זאת גם באופן הבא בכדי לשלוט על הריווח העליון/תחתון מול הימני/שמאלי:

.flex-gap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 12px;
}

או למשל כך עם ריווח שונה בין השתיים:

.flex-gap {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
  column-gap: 24px;
}

תמיכת דפדפנים

CSS Gap הוא פיצ׳ר של CSS Grid ושל Flexbox ונתמך כרגע בכל הדפדפנים המובילים:

ובכל זאת נזכיר שאתם יכולים לבדוק אם הדפדפן תומך ב CSS Gap עם Flexbox באופן הבא ובאמצעות הפיצ׳ר @supports:

@supports (gap: 10px) with (display: flex) {
  div {
    display: flex;
    gap: 10px;
  }
}

עד כאן.

Further Reading & Inspiration:

• How to detect browser support for Flexbox Gap.
• Chromium lands Flexbox gap.
• CSS Gap Space with Flexbox.