שימוש ב 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 לגלוש שורה בהתאם לרוחב אלמנט האב.

זה נראה כך:

1
2
3
4
5
6

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

1
2
3
4
5
6

ריווח עם margins

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

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

.flex-gap > div {
  margin: 6px;
}
1
2
3
4
5
6

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

1
2
3
4
5
6

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

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

ריווח עם gap

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

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

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

1
2
3
4
5
6

1
2
3
4
5
6

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

.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 ונתמך כרגע בכל הדפדפנים המובילים:

Data on support for the flexbox-gap feature across the major browsers from caniuse.com

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

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

עד כאן.

Further Reading & Inspiration:

רועי יוסף
רועי יוסף

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

2תגובות...
  • איש נחמד 19 ביוני 2021, 23:02

    מאמר נפלא רועי, רק שיש באג מרגיז ב-GAP הזה. ניקח את הדוגמה שהבאת למעלה עם ה-CSS הבא:

    .flex-gap{
        row-gap: 5px;
        column-gap: 5px;
    }
    .flex-gap .item {
        width: 50%;
    }
    <div class="flex-gap gap1 item-margin">
        <div class="item item-1">1</div>
        <div class="item item-1-2">2</div>
        <div class="item item-2">3</div>
        <div class="item item-2-2">4</div>
        <div class="item item-3">5</div>
        <div class="item item-3-2">6</div>
    </div>
    

    תוכל לראות שה-GAP מתווסף לרוחב וגורם ל-overflow של השורה. נידון כאן:
    https://stackoverflow.com/questions/48214281/why-does-grid-gap-cause-an-overflow

    • רועי יוסף 20 ביוני 2021, 0:37

      תודה, אתה באמת איש נחמד 🙂

      תקן אותי אם אני טועה, הפתרון כפי שמוצג בקישור ששלחת הוא להשתמש ביחידה Fr ולא באחוזים…

השאירו תגובה

 

Up!
לבלוג