מה זה CSS Flexbox?
CSS Flexbox (פריסת קופסה גמישה) הוא מודל פריסה חד-ממדי להפצת מרחב ויישור פריטים בשורה או עמודה. מיכל ה-flex מוגדר עם display: flex, וילדיו הישירים הופכים לפריטי flex. מאפייני מיכל מרכזיים: flex-direction (שורה או עמודה), flex-wrap (שורה אחת לעומת ריבוי שורות), justify-content (יישור ציר ראשי), align-items (יישור ציר רוחבי לכל שורה) ו-align-content (יישור ציר רוחבי של שורות מרובות). מאפייני פריט מרכזיים: flex-grow (כמה פריט גדל), flex-shrink (כמה הוא מצטמצם), flex-basis (גודל ראשוני) ו-align-self (עוקף את align-items של המיכל לפריט ספציפי). Flexbox אידיאלי לסרגלי ניווט, שורות כרטיסים, פריסות ממורכזות וכל סידור חד-ממדי.
כיצד להשתמש במחולל CSS Flexbox
-
כוונן את מאפייני המיכל (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) באמצעות התפריטים הנפתחים ושדה הקלט.
-
לחץ על כל פריט בתצוגה המקדימה כדי לבחור אותו (הופך לכתום).
-
הגדר flex-grow, flex-shrink, flex-basis ו-align-self של הפריט הנבחר בלוח הפריטים.
-
לחץ על '+ הוסף פריט' להוספת פריטים; לחץ על 'הסר' למחיקת הפריט הנבחר.
-
עבור בין לשוניות CSS ו-HTML כדי לראות את הקוד שנוצר, ואז לחץ על העתק.
-
לחץ על 'אפס הכל' כדי להתחיל מחדש עם פריסת ברירת המחדל של 3 פריטים.