שטיגליץ עיצובים

פלקס בוקס – פריסה רספונסיבית


אפריל 7, 2016 9:13 pm

בשנים האחרונות הדרישה לאתרים רספונסיביים עולה באופן טיבעי. האמת היא שזה גורם ללא מעט כאבי ראש לבוני אתרים וממשקים. מערכות כמו Bootstrap ואחרות מאפשרות לעשות זאת במהירות יחסית אבל עדיין העימוד נעשה בעזרת חוקי css שלא באו לעולם על מנת לעמד דפי רשת, כמו floats. עתה, יש לנו סט כלים שלם שמאפשר עבודה נוחה למדי. סט הכלים נקרא flex box. ועל זה המדריך.

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

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

על מנת להשתמש בפלקס בוקס העקרון מארגן כל שעלינו לעשות הוא להכריז על אלמנט עוטף כפלקס. בדוגמה שלנו:

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

בשלב הבא של הhtml שלי יש לי תמונה ותפריט:

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

למשל, הרשימה של התפריט מוכרזת גם היא כפלקס, על מנת שנוכל לארגן את פירטי הרשימה. שימו לב שפרטי הרשימה (li) מקבל משהו שנקרא: flex:1. זה קיצור שאומר כמה רוחב וגובה יקבל האלמנט. פלקס יחשב אוטומטים את הדברים. אבל אם אנחנו רוצים לשלוט לחלוטין בעניין יש לכתוב את הגירסה המלאה: flex: 1 1 33.33%.

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

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

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

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

יש גם align-content. ויש גם align-items. הפשרויות שלהן דומות רק שהן מתייחסות לציר האנכי.למשל אתם רואים שאת הטופס מיקמתי במרכז האופקי ובמרכז האנכי.

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

כמו כן, שימו לב שכדי ליצור גריד השתמשתי אך ורק בשתי הוראות: flex-wrap: wrap;
justify-content: space-between;

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

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

ועכשיו כל הcss, כולל המדיה קוויריס:

 

ראו דמו

 

כתיבת תגובה

ספק שם מלא

@

אנא ספק כתובת דוא"ל תקפה

אנא ספק כתובת אינטרנט תקפה. כגון: http://www.yoursite.com

Show Buttons
Hide Buttons