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 בפעולה
שחקו עם הדוגמה הבאה והגדילו את האלמנטים באמצעות הסליידר עד שלא יהיה לאלו מקום בקונטיינר. לחיצה על תיבת הקוד תיישם את התכונה המופיעה בו על הדוגמה החיה וכך תוכלו לראות את ההבדלים:
CSS Demo: 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 ולהימנע מהוספת נקודות שבירה רבות ובכך לשלוט בעיצוב באופן גמיש ויעיל יותר.
בזאת סיימנו. תגובות, שאלות וטענות יתקבלו בברכה כמובן…. 🙂
גאוני!! איזה בלוג מטורף! מקצועי, דידקטי, ברור.
תענוג
תודה מאמי 😉
היי תודה על הבלוג זה עוזר ממש..
השאלה שלי איך אפשר לשים בתוך קונטיינר אחד – גם justify-content (ציר ה X) , וגם align-items (ציר ה Y)? איך זה מסתדר?
אשמח לדוגמאות של שילובים ביניהם.
תודה
היי תמר,
אין שום בעיה לעשות זאת, הנה דוגמה פשוטה שיצרתי ב Codepen…
פוסטים מצויינים!
מעשיים וקלים לביצוע
תודה!