Studio Editor: בחירה בין כלים מבוססי פלקסבוקס (Flexbox) לכלים מבוססי גריד

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

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

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

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

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

מומלץ במיוחד עבור: פריסות מורכבות הדורשות התאמה מדויקת ומושלמת לפיקסלים.

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

מומלץ במיוחד עבור: פריסות נפרדות וייחודיות בתוך מקטעים. 

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

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

בנוסף, אתם יכולים להגדיר את סדר האלמנטים של ה-stack לכל נקודת ברייקפוינט כדי להבטיח שהפריסה תיראה טוב בכל סוגי המסכים. 

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

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

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

מומלץ במיוחד עבור: ארגון כמות תוכן גדולה בפריסה נוחה ומסודרת. 

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

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

מומלץ במיוחד עבור: רשימות או כל סוג תוכן שאתם רוצים לפצל לפריטים כך שייראו אחידים בצורה מושלמת.

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

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

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

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

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

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