0

להצדיק-תוכן: space-between Explained (CSS)

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

מעבד... 0%

תוצאה

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

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

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