שימוש ב CSS Gap עם Flexbox – הסבר ודוגמאות קוד

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

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

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

ריווח אלמנטים ב-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 item בנפרד, בעוד gap מוגדר על ה-flex container עצמו. התכונה gap יוצרת ריווח רק בין האלמנטים, ולא בקצוות החיצוניים.

ריווח עם 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;
}

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

התכונה gap עם Flexbox נתמכת בכל הדפדפנים המובילים. Firefox הוסיף תמיכה באוקטובר 2018, Chrome ביולי 2020, ו-Safari באפריל 2021. התכונה גם מותאמת לכיוון הכתיבה (flow-relative), ולכן עובדת נכון עם תכונות לוגיות ב-CSS.

אפשר לבדוק תמיכה באמצעות הפיצ׳ר @supports:

@supports (display: flex) and (gap: 10px) {
  .container {
    display: flex;
    gap: 10px;
  }
}

מה הלאה: Gap Decorations

פיצ׳ר CSS חדש בשם Gap Decorations נמצא בפיתוח כ-W3C Working Draft. הפיצ׳ר מרחיב את התכונה column-rule הקיימת כך שתעבוד גם עם Grid ו-Flexbox, ומוסיף תכונת row-rule חדשה.

הפיצ׳ר יאפשר הוספת מפרידים ויזואליים (קווים, דפוסים) בין אלמנטים ללא צורך באלמנטי DOM נוספים. Chrome ו-Edge 139+ כבר תומכים בו מאחורי דגל ניסיוני.

שאלות נפוצות

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