האם להשתמש ב Flex או בגריד?

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

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

גמישות לפני הכל

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

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

See the Pen Simple Flex Layout by Yoav Shai (@yoav-shai) on CodePen.

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

See the Pen Simple Flex – Column by Yoav Shai (@yoav-shai) on CodePen.

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

See the Pen Flex – nowrap by Yoav Shai (@yoav-shai) on CodePen.

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

See the Pen Flex – Wrap by Yoav Shai (@yoav-shai) on CodePen.

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

See the Pen Complex flex wrap by Yoav Shai (@yoav-shai) on CodePen.

תבניות מסובכות ורספונסיביות בקלות

גריד, לעומת פלקס, יודע לייצר תבניות מסובכות ומורכבות הרבה יותר ובקלות רבה יחסית, כמו העיצוב הזה לדוגמה, שפעם כדי לייצר אותו היינו צריכים להשתמש ב float וב clearfix

See the Pen Classic Grid by Yoav Shai (@yoav-shai) on CodePen.

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

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

See the Pen Responsive Grid by Yoav Shai (@yoav-shai) on CodePen.

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