מספר מילים על התכונה flex-wrap

flex-wrap היא תכונה ספציפית הקיימת כחלק מהמודול CSS flexbox. באמצעות תכונה זו ניתן לקבוע כיצד flex items יוצגו ויתנהגו ב flex container כשאין לרשותם מספיק מקום.

התכונה flex-wrap מספקת לנו דרך מהירה להפוך flex container לרספונסיבי יותר, ולעיתים אף מסירה מאיתנו את הצורך לכתוב או לקבוע נקודות שבירה (breakpoints) בעצמנו.

אבל לפני שנמשיך לדבר על תכונה זו, נאמר מספר מילים על Flexbox. השימוש ב Flexbox מאפשר ליצור מתווים (layouts) ואלמנטים חד מימדים כגון header, footer, navigation, בקלות יחסית.

לאלו שאינם יודעים, נזכיר כי ב flexbox קיימים שני סוגים של ״קופסאות״. האחד הוא Flex Container (קונטיינר מסוג Flex) והשני הוא Flex Item (אלמנט שהוא ילד ישיר של אותו קונטיינר).

הפיכת אלמנט כלשהו ל flex container מתבצעת בקלות על ידי הוספת התכונה display: flex לאלמנט המדובר. עכשיו, ולאחר שברשותינו flex container, אנו יכולים להכריז על זה את התכונה flex-wrap  וזאת על מנת שנוכל לשלוט בהתנהגות של אותם flex items, אותם אלמנטים שהם הילדים הישירים של הקונטיינר המדובר:

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

flex-wrap מיושמת אך ורק על ה flex container ואינה תמומש מטה בהיררכיה  על האלמנטים הנמצאים בקונטיינר עצמו, כלומר על אותם flex items.

הערכים של התכונה flex-wrap

לתכונה flex-wrap קיימים שלושה ערכים אפשריים:

nowrap: זהו ערך ברירת המחדל כך שאין צורך להגדירו באופן מיוחד. במקרה זה ה flex items תמיד יישארו באותה שורה ולא יגלשו לשורות חדשות.

wrap: יאפשר ל flex items לגלוש לשורות חדשות במידה ואין עבורם מספיק מקום בשורה הראשונית. האלמנטים להם אין מקום ירדו לחלקו השמאלי התחתון של הקונטיינר כברירת מחדל (באתרי LTR*).

wrap-reverse: יגרום לאפקט ההפוך מקודמו. במקום שהאלמנטים יגלשו לחלקו השמאלי התחתון של הקונטיינר הם יגלשו לשורה חדשה מעל השורה הראשונית, כולומר לחלקו העליון השמאלי של הקונטיינר.

*ההתנהגות באתרים בעברית או באתרי RTL תהיה הפוכה. wrap יוביל לירידת אלמנטים לחלקו הימני התחתון של הקונטיינר ו wrap-reverse תוביל לאלמנטים בחלקו הימני העליון.

ברירת המחדל של flex-wrap

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

אך אם נהפוך זה ל flex container, כל הילדים (flex items) יסתדרו יפה בשורה אחת כבדוגמה הבאה:

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

וכאן בדיוק נכנסת לתמונה התכונה flex-wrap שתאפשר לנו ולקבוע האם אותם אלמנטים יגלשו לשורות חדשות כשאין להם מקום בקונטיינר או לא. נסביר זאת על ידי דוגמה…

נזכיר שוב – flex-wrap רלוונטית אך ורק בסיטואציה בה אותם אלמנטים הנמצאים בקונטיינר אינם נכנסים בשורה אחת, כלומר אין ל flex items מספיק מקום בקונטיינר עצמו.

התכונה flex-wrap בפעולה

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

flex-wrap: no-wrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

פשוט לא? flex-wrap היא תכונת CSS מאד פשוטה הניתנת להבנה בקלות שלא כמו רבות אחרות.

זה המקום לציין כי השימוש ב wrap-reverse אינו שכיח, אך עדיין נחמד שזה קיים עבורינו בארגז הכלים… 🙂

נספח: אוהבים קיצורי דרך? הכירו את flex-flow

פוסט זה הוא מקום ראוי לציין כי flex-wrap היא חלק אחד מתוך התכונה flex-flow. התכונה flex-flow מאפשרת לנו להחליף את התכונות flex-wrap ו flex-direction יחדיו ולחסוך שורת קוד אחת 🙂

במספר מילים – אם אינכם יודעים (ולא נכנסתם לקישור המצורף הפסקה הקודמת), התכונה flex-direction קובעת הילדים בקונטיינר יסתדרו בשורה או בעמודה. הערכים של זו הינם row, column, column-reverse, והערך row-reverse.

אז לעניינו, את שתי התכונות הבאות:

.flex-container {
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
}

ניתן לכתוב בצורה מקוצרת באמצעות flex-flow באופן הבא:

.flex-container {
  flex-flow: row-reverse wrap-reverse;
}

סיכום

המאפיין flex-wrap ב-CSS מאפשר ליצור עיצובים רספונסיביים וגמישים בתוך flex-containers. על ידי הגדרת ערכים כמו wrap או wrap-reverse ניתן להבטיח שהפריטים בקונטיינר יתאימו לשטח העומד לרשותם ויתפרסו לשורות נוספות במידת הצורך. באופן זה ניתן לפשט את ה-CSS ולהימנע מהוספת נקודות שבירה רבות ובכך לשלוט בעיצוב באופן גמיש ויעיל יותר.

בזאת סיימנו. תגובות, שאלות וטענות יתקבלו בברכה כמובן…. 🙂