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;
}
}עד כאן.
