חיפוש ]

מספר מילים על התכונה 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 עם מספר אלמנטים בתוכו. שימו לב כי כל ילד נמצא בשורה משל עצמו במצב סטנדרטי:

1
2
3
4

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

1
2
3
4

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

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

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

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

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

CSS Demo: flex-wrap

flex-wrap: no-wrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
1
2
3
4
5

רוחב אלמנט: 115 פיקסלים

פשוט לא? 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 ולהימנע מהוספת נקודות שבירה רבות ובכך לשלוט בעיצוב באופן גמיש ויעיל יותר.

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

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

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

  • מאמי 19 אוקטובר 2020, 12:06

    גאוני!! איזה בלוג מטורף! מקצועי, דידקטי, ברור.

    תענוג

  • תמר 2 ספטמבר 2021, 15:03

    היי תודה על הבלוג זה עוזר ממש..
    השאלה שלי איך אפשר לשים בתוך קונטיינר אחד – גם justify-content (ציר ה X) , וגם align-items (ציר ה Y)? איך זה מסתדר?

    אשמח לדוגמאות של שילובים ביניהם.
    תודה

  • ברוקולי 20 ספטמבר 2022, 15:46

    פוסטים מצויינים!
    מעשיים וקלים לביצוע

    תודה!

תגובה חדשה

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