FLEX ואני

משך זמן קריאה: 6 דקות

במאפיין display: flex נתקלתי בתחילת 2014 כשפתאום עלו וצפו הרבה פוסטים על המאפיין הקסום הזה שיעשה סדר בארגון האובייקטים על פני הדפדפן. אני חייבת להודות שקראתי כמה פוסטים (כמו Dive into Flexbox ו Flexbox layout isn't slow ואפילו שמרתי לי את The Ultimate Flexbox Cheat Sheet) אבל לא הצלחתי לגמרי להבין איך להשתמש בו.

באפריל 2014 לאה ואני נסענו לכנס של smashing magazine באוקספורד ואחת ההרצאות שם הייתה של Zoe Mickley Gillenwate שהנושא שלה היה Leveling Up With Flexbox (סרטון ההרצאה, והמצגת). ההרצאה שלה הייתה מאלפת, ומאז שחזרנו הייתי נחושה בדעתי להשתמש ב flex. אבל מפה לשם – ובעיקר בגלל הצורך לתמוך גם באקספלורר 8 – נטשתי את flex ונשארתי עם float 🙁 בתחילת שנת 2015 פרויקט חדש-ישן הגיע אל שולחני. אחת המשימות שלי הייתה להתאים אותו למובייל ושם, ממש על דרך המקרה, התגלגלתי להשתמש ב flex. אמנם לא כפתרון מערכתי לעימוד האלמנטים, אלא בקטנה – שינוי סדר הבאת primary ו-secondary במובייל ויישור טקסט אנכי – אבל מבחינתי זאת הייתה פריצת הדרך שלי לשימוש ב flex.

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

אני משתמשת בעיקר ב-3 מקומות שמסייעים לי:

היות ולאקספלורר אין תמיכה מלהיבה ב flex (בטח שלא אקספלורר 8), שמחתי שנקודת המוצא לפרויקט הייתה שאין צורך להתאים לאקספלורר. וכך התחלתי להחליף float-ים ב flex 🙂

אני לא אתיימר להביא כאן מדריך מפורט בעברית על flex – בשביל זה יש את האתרים שציינתי למעלה, פרט לעובדה שהם באנגלית 😉 אבל כן אנסה לחדד כמה נקודות בנוגע אליו.
כאשר מגדירים לאלמנט display: flex ההשפעה היא על כל מה שנמצא בתוך האלמנט. למשל אם יש לנו ul שבתוכו li-ים, עצם הגדרת flex ל-ul משפיעה מיידית על התנהגות ה-li-ים, ומחילה עליהם ברירות מחדל של "בנים" של flex.

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Blog</li>
    <li>Contact/li>    
</ul>

ללא כל הגדרה מיוחדת מעבר לסיגנון הרשימה, התצוגה תהייה כזאת:

standart ul list

הוספה של: {ul{display: flex מייד תשנה את הפריסה של ה li לתצוגה רוחבית. ברירת המחדל של פריסת אלמנטים שנמצאים בתוך flex היא row – זאת אומרת – פריסה אופקית, אז כל עוד לא הגדרנו אחרת – האלמנטים (li – ים) יתפרסו אופקית בתוך המיכל שלהם (ה ul) ובלי יותר מדי עבודה הניווט יהיה אופקי:

ul with flex

בעצם ה-flex מארגן את האלמנטים על פני העמוד ביתר קלות לעומת float. הוא לא מצריך clearing וגם הרבה יותר דינאמי. אבל בשביל לשלוט בו צריך לדעת להכיר עוד כמה מאפיינים חברים, כמו למשל justify-content שמשפיע על אופן הפריסה של האלמנטים בתוך ה-ul. בברירת המחדל האלמנטים נפרסים בתחילת ה flex – תחילת האלמנט – משמאל לימין. אבל ניתן לשנות את הריווחים ביניהם ע"י הגדרה של justify-content: space-between כך שהאלמנטים יתפרסו על פני כל הרוחב של ה-ul וייראו ככה:

ul with justify-content

ul {
    background-color: rgba(155, 37, 129, 0.3);
    display: flex;
    justify-content: space-between;
}

 

יש הגדרות נוספות שניתן לתת לאלמנט שמוגדר ב display: flex והם:

  • flex-direction
  • flex-wrap
  • flex-flow
  • align-items
  • align-content

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

ועכשיו נעבור ל"ילדים" של אלמנט שהוגדר ב flex.

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

li:first-child {
 order: 4;
}

וככה זה יראה:

ניווט עם שינוי מקום של הערך הראשון

(היות ואין פה HTML) – אגלה לכם סוד ש-Home הוא ה-li הראשון 🙂

מאפיין נוסף שמאוד מייעל את העבודה עם flex ועיצוב רספונסיבי הוא flex, שמאגד בתוכו שלושה מאפיינים: flex-grow , flex-shrink ו-flex-basis. המאפיין קצת מורכב וניתן לפרק אותו, אבל עדיף להשתמש באופציה המקוצרת. מה המאפיין הזה נותן לנו בעצם? שליטה על רוחב או גובה הילדים (תלוי אם מוגדר לאב פריסה של שורה או טור. אין פה שליטה גם על גובה וגם על רוחב בו זמנית), ויכולות הפריסה שלהם בתוך אלמנט האב שלהם.

כדי להסביר את זה, נסתכל על האזור של "Need some inspiration?" באתר של זואי:

תמצות של הקוד (כמובן שיש עוד קוד – אבל לנוחיות ההבנה של flex הורדתי אותו):

HTML:

<section class="gallery">
 <article class="gallery-item"></article>
 <article class="gallery-item"></article>
 ....
</section>

css:

.gallery {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.gallery-item {
 flex: 1 0 200px;
 margin: 0 0 20px 20px;
}

ההגדרה של flex: 1 0 200px; אומרת ככה:

1 – ההגדרה הראשונה שייכת ל flex-grow. מציינת את האפשרות להתרחב בצורה כזאת שכל האלמנטים בשורה שווים ביניהם (סך כל הרוחב האפשרי של אלמנט האב, פחות הרווח המוגדר ב margin, לחלק לכל הילדים של הפלקס). האלמנטים נפרסים בצורה כזאת שהם ממלאים את רוחב האב. כשאין מקום להציג באופן מלא את הכל – נוצרת שבירה של שורה, עם שמירה על רוחב קבוע.

0 – ההגדרה השניה שייכת ל flex-shrink. מציינת את האפשרות להתכווץ. ברירת המחדל היא 1, בדוגמה שלנו היא 0 – זאת אומרת – אל תתכווץ.

200px – ההגדרה האחרונה היא הקובעת את הרוחב הבסיסי של האלמנט. ניתן להגדיר פה גם 0 או auto אבל הגדרה קבועה כמו זו של 200px תקבע את הגודל המינימאלי של יחידת הבסיס ולא תאפשר לכיווץ מעבר לגודל זה.

וככה זה יראה ברזולוציות שונות:

flex-children

מאפיין נוסף שיש לילדים של flex הוא align-self שמאפשר שליטה על מיקום ילד של flex ביחס לאבא שלו. כך למשל אפשר להצמיד את ה-footer לתחתית העמוד אם מוגדר למשל ל body{display: flex} , ול-footer מוגדר align-self: flex-end. דוגמה והסבר ניתן לקרוא פה.

2 דברים שמפריעים לי ב-flex:

  • ל-flex היו כמה גלגולים עד שהוא התאפס על עצמו (אני מקווה שלא יהיו עוד) מה שיצר סינטקסט ישן וחדש. לא כל המאפיינים החדשים נכנסו לסטנדרט של כל הדפדפנים ויש כאלו שעדיין מותאמים למאפיינים הישנים שלא תמיד חופפים לחדשים. כל זה מאוד מבלבל, לא נוח לתחזוקה ומצריך הרבה שורות קוד להתאמות לדפדפנים השונים. מעבר לזה – לא כל הדפדפנים חברים של flex ומצריכים פריפקס (כמו display: -webkit-flex).
  • לפעמים דווקא הגמישות שלו וההתרחבות שלו הם בעייתיים (מההיבט העיצובי ולא התכנותי): אם יש מספר מתחלק של אלמנטים ילדים זה סבבה, אבל לפעמים הילדים לא מסתדרים יפה. למשל אם קבעתי אפשרות מתיחה לילדים, האלמנט האחרון – או השניים האחרונים – תמיד יתפרס על כל הרוחב. כמו למשל בדוגמה למעלה שיש מצב של 2 שורות של 5 ועוד שורה של 2. נכון, יש שיאמרו שזה נראה סבבה כי יש שמירה על מראה של כל האזור – אבל לטעמי זה בעייתי. עדיין לא מצאתי את הפתרון לעניין שלא דרך flex (מה שלא היה קורה לו היינו משתמשים ב float)

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