Flexbox - מדריך למתחילים - חלק א׳

בקיץ האחרון התחלתי ללמוד פיתוח אתרים.
אני חושב שאני בר מזל, כי החיים של מפתח אתרים ב-2016 הרבה יותר קלים מחיים של מפתח אתרים ב-2006 - לא שאני מתיימר לדעת איך זה להיות מפתח אתרים לפני 10 שנים, אבל התנסות קלה בטכניקות שהשתמשו (ועדיין משתמשים) בהן, כמו שימוש בטבלה וב- float על מנת לעצב דף אינטרנט, גרמו לי מהר מאוד כאב ראש, והרי די ברור שהמאפיינים הללו לא יועדו לבצע את התפקיד החדש שהמציאו להם.

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

Flexbox

Flexbox הוא כינוי ל- CSS Flexible Box Layout Module, שהוא בעצם Box Model חדש שמותאם במיוחד לממשקי משתמש רספונסיבים. כפי שנראה מיד, הילדים של אותו אלמנט שמוגדר כפלקסבוקס יכולים להיות מסודרים באופן אופקי או אנכי, ונוכל לקבוע מה יקרה עם השטח הפנוי שהם משאירים.

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

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

אלמנט ה”אב”, או הקונטיינר, שאותו מגדירים כאלמנט פלקסבוקס מכונה Flex Container, והילדים שלו מכונים Flex Items. בחלק הראשון של המדריך נתעסק בתכונות המוגדרות על הקונטיינר, ובחלק השני בתכונות המוגדרות על הילדים.

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

Flex Container

על מנת להתחיל להשתמש ב- Flexbox עליכם להגדיר אלמנט עם display: flex, מה שכאמור יהפוך אותו להיות Flex Container ואת הילדים של אותו אלמנט ל- Flex Items.

See the Pen Flexbox Activate Demo by Guy (@guytepper) on CodePen.

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

שינוי כיוון ה- Flex Container

ניתן להגדיר את הכיוון שבו יפרסו הילדים ע”י הגדרת flex-direction בקונטיינר ל-row (ברירת מחדל) או ל- column.

כבר עכשיו אפשר לראות כמה שימושי Flexbox - בדוגמה הבאה נסו להקטין ולהגדיל את גודל הדפדפן ושימו לב איך הילדים מגיבים לשינוי ב- flex-direction.

See the Pen flex-direction Responsive Usage by Guy (@guytepper) on CodePen.

בנוסף ל- row ו- column, קיימים גם הערכים row-reverse ו- column-reverse, שמבצעים את אותה הפעולה רק הפוך.

שובר שורות

כפי שראינו בדוגמה הראשונה, Flex Items תמיד יפרסו על אותה השורה. זה קורה בגלל המאפיין flex-wrap שמוגדר ל- nowrap כברירת מחדל.

flex-wrap קובע אם ה- Flex Items יוכלו ״לגלוש״ לשורות חדשות, או שיואלצו להשאר על גבי שורה אחת. אם נגדיר flex-wrap: wrap, הפריטים יוכלו לגלוש ולהפרס בשורות חדשות (או עמודות, כפי שמוגדר ב- flex-direction).

See the Pen flex-wrap Demo by Guy (@guytepper) on CodePen.

ניתן להשתמש ב-flex-flow כקיצור של flex-direction ו- flex-wrap. לדוגמה:

flex-flow: column wrap;

יישור עם פלקסבוקס

עד עכשיו, יישור אלמנטים בדף אינטרנט היה כאב ראש לא קטן. פלקסבוקס הופך את כל העיסוק ביישור אלמנטים לקליל, בעזרת 3 מאפיינים חדשים: justify-content, align-items ו- align-content.

justify-content

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

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

See the Pen justify-content Demo by Guy (@guytepper) on CodePen.

align-items

קובע את יישור האלמנטים על גבי הציר המשני. זהה ל-justify-content, רק הפוך.

  • flex-start - צד האלמנטים הפונה לכיוון התחלת הציר המשני ממוקם עליו.
  • flex-end - צד האלמנטים הפונה לכיוון סוף הציר המשני ממוקם עליו.
  • center - האלמנטים ממורכזים על גבי הציר המשני.
  • baseline - האלמנטים מיושרים לפי ה-baseline שלהם (ראו דוגמה).
  • stretch - ברירת מחדל. מגדיל את האלמנטים עד למילוי הקונטיינר.

See the Pen align-items Demo by Guy (@guytepper) on CodePen.

align-content

קובע את יישור השורות על גבי הציר המשני, במידה ויש בו מקום פנוי. לא משפיע כאשר יש רק שורה אחת של Flex items.

  • flex-start - השורות צמודות אחת לשנייה מתחילת הקונטיינר.
  • flex-end - השורות צמודות אחת לשנייה מסוף הקונטיינר.
  • center - השורות צמודות אחת לשנייה באמצע הקונטיינר.
  • space-between - השורות פרוסות לאורך הקונטיינר באופן שווה; שורה ראשונה תופיע בתחילת הקונטיינר והאחרונה בסופו.
  • space-around - השורות פרוסות לאורך הקונטיינר באופן שווה עם רווחים שווים ביניהן.
  • stretch - ברירת מחדל. מגדיל את השורות עד למילוי הקונטיינר.

See the Pen align-content Demo by Guy (@guytepper) on CodePen.

וכולם ביחד !

כפי שראיתם, מלאכת יישור האלמנטים כעת פשוטה מתמיד. שילוב של כל המאפיינים הללו יחדיו מאפשרים לנו לעשות דברים שעד כה היו מסובכים למדי, כמו למשל מרכוז באמצע הדף.

See the Pen Flexbox Alignment Demo by Guy (@guytepper) on CodePen.

כאן מסתיים החלק הראשון של המדריך. אני מקווה שגם אתם התאהבתם בפלקסבוקס!

בחלק השני של המדריך נלמד על Flex Items והמאפיינים הייחודיים שלהם. אם עד עכשיו לא התרשמתם מפלקסבוקס - החלק הבא יפיל אתכם מהכסא (-: