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