מחולל CSS Flexbox
בנו פריסת CSS flexbox בצורה ויזואלית: כיוון-גמיש, יישר-תוכן, יישור-פריטים, עטיפה גמישה ורווח על המיכל, בתוספת גמישות-גידול לכל ילד, כיווץ גמיש ו-flex-base, הכל עם תצוגה מקדימה חיה ו-CSS הניתן להעתקה.
תוצאה
לפריסת flexbox יש שני ספרי חוקים נפרדים - מאפיינים על המיכל (הכוונה להגמיש, להצדיק-תוכן, ליישר-פריטים, להגמיש-עטיפה, פער) ומאפיינים על כל ילד (להגדיל את הגמישות, להגמיש-להתכווץ, להגמיש-בסיס) - וערבוב ביניהם הוא המקור הנפוץ ביותר ל"למה זה לא מרכז / גדילה / עוטף" את הדרך. מחולל זה מעביר את שני ספרי החוקים על המסך בבת אחת: שנה כל פקד מיכל או שדות של כל ילד משלו ושלוש תיבות ממוספרות ומקודדות צבע מתעדכנות מיד, כך שהסיבה והתוצאה נשארות גלויות.
צד המכולה מכסה כל ציר פריסה: בחרו כיוון, בחרו כיצד ילדים יחולקו לאורך הציר הראשי עם הצדקה-תוכן, יישרו אותם על הציר הצלב, החליטו אם הם יתעטפו על קווים חדשים, והגדרו מרווח במקום פריצות שוליים ביניהם. הצד של הילד הוא אמיתי באותה מידה: הוסף קופסאות עד שמונה, הסר עד שתיים, ותן לכל אחת מהן flex-grow, flex-shrink וה-flex-base משלו - המחולל מדפיס חוק CSS לכל ילד רק כאשר לפחות אחד מאלה שונה מברירת המחדל של הדפדפן, כך שהקוד המועתק לעולם אינו מרפד את עצמו ב-flex-grow: 0 על תיבות שאינן זקוקות לו.
דפים מוגדרים מראש קופצים ישר לפריסות שאנשים מחפשים בפועל לפי שם: איך למרכז div (שאלת פריסת ה-CSS היחידה הנשאלת ביותר, נפתרת עם הצדקה-תוכן ויישור-פריטים שניהם מוגדרים למרכז), סרגל ניווט שמאלי קישורים-ימני של לוגו, עמודות גמישות ברוחב שווה באמצעות flex-grow, והשוואה זו לצד זו של רווח קרוב ויחסי-בין שלו.
כמו כל כלי באתר זה, המחולל הוא חינמי ופועל כולו בדפדפן שלך: ללא העלאה, ללא חשבון, והוא ממשיך לעבוד במצב לא מקוון ברגע שהדף נטען.