דברים שלא ידעתי על פלקס

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

בגדול, רוב השימוש בפלקס הוא ההגדרות על 'אלמנט האב'. עצם ההגדרה שלו כ-display: flex משפיעה באופן אוטומטי על הילדים שלו. ולכן סט ההגדרות שיש לו כמו למשל justify-content ו-align-items די עונים על צרכים בסיסיים בעבודה עם פלקס. כמובן שיש גם את ההגדרות על האלמנטים-ילדים, אבל לא תמיד עושים בהם שימוש. כבר העלתי בפוסט אחר שלי על פלקס על ההבנה החלקית שלי בהגדרות של  flex-basis (מאפיין שניתן ל"ילד" של פלקס), להבדל בין שימוש בו לבין הגדרה של רוחב.

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

אתגר ראשון

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

אתגר שני

האתגר השני היה בעימוד האלמנטים. נדרשתי ליישור כל האלמנטים לימין, אבל את האחרון להצמיד לשמאל. justify-content: space-between, לא היה עוזר כאן כי הוא היה פורס את כל האלמטים במרווחים מקצה לקצה. justify-content:flex-start נתן את המענה של הצמדה של כולם לימין (כן, האתר בעברית).

ניסיתי להשתמש במאפיין align-item על האלמנט האחרון שלי אבל זה לא עזר. מה שהייתי צריכה זה justify-item, אבל אין חיה כזאת. מה עושים? פניתי למקור המידע הגדול ביותר – בינג. סתאאאם – גוגל 😉 שם מצאתי תשובה לבעיה שלי. מסתבר שאם  נותנים לאלמנט האחרון margin-right: auto הוא ייצמד לשמאל. אפשר לקרוא ב spec של w3c על הנושא, ובתשובה לשאלה דומה ב Stack Overflow. עוד על כל העניין של יישורים והתנהגות של "אלמנטים-בנים" של flex אפשר לקרוא בתשובות המצויינות שמובאות ב Stack Overflow.

See the Pen justify-content with margin-auto by Rachel Bratt Tannenbaum (@rachelbt) on CodePen.

אתגר שלישי

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

מה היה הפתרון? די קל האמת 🙂

section{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.last{
    min-width: 100%;
    flex-grow: 1;
}

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

כמה ימים אחרי שנתקלתי באתגר האחרון העלה רותם הורוביץ לקבוצה של css masters שאלה די דומה. אצלו האתגר היה קצת יותר קשה, היות והוא רצה ש-2 האלמנטים הראשונים יתפסו יחדיו את השורה הראשונה בלי להכתיב להם גודל. מוזמנים לצפות בשאלה, בתשובות שעלו ובפתרון שאליו הוא הגיע.

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

עריכה (1.06.2017): אחרי שקיבלתי לינק לפוסט מצויין על פלקס והתנהגויותיו השונות מ 2 מקורות שונים (לאה כהן ומתן יוסף) – מצרפת גם פה. ממולץ בחום!