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

CSS Flexbox ו-CSS Grid הם שני הכלים המרכזיים לניהול layout באתרים. Flexbox מטפל בעימוד חד-מימדי, ו-CSS Grid פותר את הסיפור הדו-מימדי עם עמודות ושורות.

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

רוב המפתחים מכירים אותה מ-CSS Grid, אבל מעטים משתמשים בה על קונטיינר flex. שווה להתחיל – התמיכה בדפדפנים כבר מלאה, כפי שתראו בהמשך.

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

כמו שאמרנו, CSS Gap עובד עם 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

עם 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 כשאלמנטים נשברים לשורות

כש-flex items גולשים למספר שורות, gap דואג לשני הצירים בו-זמנית. column-gap שולט בריווח האופקי באותה שורה, ו-row-gap שולט במרווח האנכי בין השורות.

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

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px; /* 8px בין שורות, 12px בין אלמנטים */
}

נקודה חשובה: gap לא נכנס לחישוב של flex-basis. אם רוצים בדיוק 3 אלמנטים בשורה עם gap של 20px, צריך לחשב את ה-gaps לבד:

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card-grid > * {
  /* 3 אלמנטים בשורה: מחסירים 2 gaps, מחלקים ב-3 */
  flex-basis: calc((100% - 40px) / 3);
}

gap עם justify-content

כשמשלבים gap עם יישור כמו justify-content: space-between, ערך ה-gap מתפקד כמרווח מינימלי. הדפדפן דואג שהמרווח לא יהיה קטן מהערך שציינתם, ואת השאר מחלק לפי כלל היישור.

.nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

כשה-container רחב, האלמנטים מתפזרים מעבר ל-16px. כשהוא צר, הם לעולם לא יתקרבו ליותר מ-16px. שילוב מעולה לסרגלי ניווט ותפריטים – חלוקה שווה עם ריווח מינימלי מובטח.

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

gap עם Flexbox נתמך בכל הדפדפנים המרכזיים. Firefox הוסיף תמיכה באוקטובר 2018, Chrome ביולי 2020, ו-Safari באפריל 2021. התכונה גם מותאמת לכיוון כתיבה, כך שהיא עובדת נכון עם תכונות לוגיות ב-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 elements נוספים. Chrome ו-Edge 139+ כבר תומכים בזה מאחורי דגל ניסיוני.

שאלות נפוצות

זהו על gap עם Flexbox. ברגע שמתחילים לעבוד איתו, אין סיבה לחזור לריווח עם margin.