FLEX ואני – מעמיקים יחסים

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

אז למה אני מתעלפת מflex?

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

 

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

זה פחות או יותר מבנה העמוד (השארתי רק את הדברים הרלוונטים):

<main class="site-main">
    <header class="page-header">
        <h1 class="page-title title-articles">מאמרים</h1>                    
    </header>
    <article class="post"></article>
    <article class="post"></article>
    <article class="post"></article>
    <article class="post"></article>
    <article class="post"></article>
</main>

נתתי ל main הגדרה של flex:

.main{  
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

ההגדרה של flex-wrap אומרת לאלמנטים ליפול שורה כשאין מקום יותר, וההגדרה האחרונה של justify-content: center ממרכזת את כל האלמנטים – מה שאומר שאם יש פחות מ 3 פוסטים בשורה הם יתמרכזו. כמה פשוט!

כשרק התחלתי לעצב את העמוד, בקובץ PSD איתו עבדתי היו מספר שווה של אלמנטים – מה שגרם לי להשתמש ב justify-content: space-between בשביל לרווח בין הפוסטים.  הכוונה היא למקם את הפוסטים הימני ביותר והשמאלי ביותר לימין ולשמאל ה DIV שעוטף אותם – וכל הפוסטים שביניהם מחלקים את המקום שנשאר שווה בשווה. הכל היה טוב ויפה וממש פיקסל פרפקט עד שלפתע נוספה עוד שורת פוסטים עם 2 בלבד, הראשון נצמד לימין והשני לשמאל (לא מראה מלבב במיוחד) :

לשמחתי – לא הייתי צריכה לעבוד כל כך קשה כדי ליישר אותם למרכז – שיניתי את justify-content: space-between ל justify-content: center; וכדי שהפוסטים לא ייצמדו אחד לשני נתתי לכל פוסט רווח משמאל:

.post{
   margin-left: 0.5%;
}

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

כדי שזה לא יקרה – צריך לתת הגדרת גובה. בשימוש ב flex זה קורה אוטומטי – גובה ה"שורה" שנוצרת נקבע ע"פ האלמנט הגבוה ביותר 🙂

 

בכל העמודים את הגדרת ה flex נתתי לאלמנט שמחזיק אותם: main. אבל main כלל בתוכו גם את כותרת העמוד (שם התגית/שם תוצאות החיפוש) ואותו לא רציתי לכלול בהתנהגות ה"פלקסית". ממש לא רציתי להוסיף עוד DIV עוטף רק בשביל שימוש בפלקס. חיפשתי ומצאתי ב stackoverflow תשובה לבעיה שלי:

.page-header{
    flex: 0 1 100%;
}

ההגדרה של 100% היא ההגדרה של flex-basis  – שקובעת את הרוחב של האלמנט. בעצם אפשר להגדיר width: 100% וזה גם יעבוד.

באתר רפרנס של codrops כתוב:

The flex-basis Property
The flex-basis property takes the same values as the width property, and sets the flex basis: the initial main size (see concepts and terminology) of the flex item, before free space is distributed according to the flex factors (see flex-shrink and flex-grow).

אני עדיין לא יודעת מה נכון יותר לשימוש. האם לתת הגדרה של רוחב באמצעות width, או האם נכון יותר לתת הגדרה של רוחב ע"י שימוש ב flex-basis.

 

שינוי סדר הופעת אלמנטים

שימוש ב flex יכול לטפל בסדר הצגת אלמנטים בעמוד מבלי לשנות את ה html ובלי לערב js. וכמובן – הכי טוב להבין עם דוגמה מהאתר 🙂 הפוטר של האתר היה מורכב מ: תוסף של ציטוטים, טקסט סטטי, תפריט (עם הפניה ליצירת קשר וכפתור לפייסבוק) וטופס הרשמה לניוזלטר. ברזולוציות נמוכות – לא הייתה בעיה – זה סדר שבו האלמנטים היו מעוצבים (למעט הציטוטים שלא הוצגו ברזולוציות נמוכות).

<div class="footer">
    <aside class="widget_quotescollection"></aside>
    <aside class="text"></aside>
    <aside class="nav_menu"></aside>
    <aside class="news_letter"></aside>
</div>

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

גם במקרה הזה היה אפשר היה להשתמש ב float ימינה ושמאלה כדי למקם את  2 ו 3 במקום הפוך – אבל זה ממש לא אידיאלי בעייני. float מוציא את האלמנט מה"flow", וזה לא נכון – אנחנו רק רוצים לשנות את הסדר לא ל"להוציא אותו מהרצף" וגם, שוב היה צריך להכניס clearing.

נתתי הגדרה של display:flex לכל הפוטר, ולתפריט וטופס ההרשמה נתתי הגדרה של מיקום:

.footer{
    display: flex;
    flex-wrap: wrap;
}
.nav_menu {
    order: 4;
    width: 49%;
}
.news_letter {
    order: 3;
    width: 51%;
}

עוד 2 קטנות:

• לא השתמשתי הרבה – אבל כן מאוד עזר שימוש ב align-items: flex-start; בשביל ליישר לקצה העליון את האלמנטים.
• מבאס אותי שעדיין צריך להשתמש ב prefix אחרת flex לא חבר של כל הדפדפנים.

מבטיחה להמשיך להשתמש ב flex ולדווח 🙂

אתר סיינטיפיק אמריקן ישראל אופיין ע"י יוני לרנר, עיצוב: קרן אייז. תכנות: לאה כהן וCSS אני 🙂