פלקסבוקס CSS מוסבר

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

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

טבלת עיון · 13 ערכים

13 of 13 rows


מכולה
	flex \| inline-flex	הופך את האלמנט למכולת פלקס.
	row \| column \| row-reverse \| column-reverse	קובע את הציר הראשי שלאורכו זורמים הפריטים.
	flex-start \| center \| space-between \| space-around \| space-evenly	מחלק את הפריטים לאורך הציר הראשי.
	stretch \| center \| flex-start \| flex-end \| baseline	מיישר את הפריטים לאורך הציר המשני.
	flex-start \| center \| stretch \| space-between	מיישר שורות גלושות כשנותר מקום בציר המשני.
	nowrap \| wrap \| wrap-reverse	מאפשר לפריטים לגלוש לשורות חדשות במקום להתכווץ.
	0.5rem \| 8px 16px	ריווח בין פריטים, אופקית ואנכית.
פריט
	0 \| 1 \| 2	כמה מקום פנוי הפריט סופג ביחס לאחים שלו.
	0 \| 1	כמה הפריט מתכווץ כשאין מספיק מקום.
	auto \| 200px \| 50%	הגודל ההתחלתי לפני חלוקת המקום הפנוי.
	1 \| 1 0 auto \| 0 0 200px	קיצור של grow shrink basis.
	auto \| center \| flex-start \| flex-end \| stretch	עוקף את align-items של המכולה לפריט אחד.
	0 \| -1 \| 2	מסדר פריט מחדש בלי לשנות את הקוד במקור.