אחרי שהבאנו בFlex-box חלק א׳ שכדי להשתמש ב CSS Flex box אנחנו צריכים קודם להגדיר את האלמנט המכיל – ״ההורה״, בחלק זה אנחנו נתמקד בהגדרות האפשריות עבור ״הילדים״ כלומר האלמנטים אותם נרצה לסדר.
ל- items שבתוך ה- container ניתן לשנות את רשימת החוקים הזו:
order
בעזרת חוק זה נוכל להגדיר את סדר הצגת האלמנטים בתוך ה- container ללא קשר לסדר מיקומם ב- DOM.
.item {
order: 2; /* default 0 */
}
flex-grow
חוק זה עוזר לנו להגדיר לכל אלמנט כמה מקום פנוי הוא יכול לתפוס ביחס לשאר האלמנטים ובמידת האפשר, כלומר אם יש שטח פנוי בתוך האלמנט המכיל.
אם לכל האלמנטים הוגדר flex-grow: 1
הגודל שלהם יחולק שווה בשווה עם השטח הפנוי במידה ואחד האלמנטים הוגדר עם flex-grow: 4
והשאר עם flex-grow: 1
אזי הוא יתפוס שטח גדול פי 4 מהם.
.item {
flex-grow: 2; /* default 0 */
}
flex-shrink
חוק זה מגדיר לכל אלמנט בכמה הוא יכול להצטמצם ביחס לשאר האלמנטים, בכדי ש- flex-shrink
יבוא לידי ביטוי נצטרך להחיל על אותו אלמנט גם flex-gow
ו- flex-basis
.
.item {
flex-shrink: 2; /* default 1 */
}
flex-basis
בעזרת חוק זה נגדיר מה יהיה גודל האלמנט לפני שהשטח הפנוי בתוך ה- container התחלק בין שאר האלמנטים, נוכל להגדיר יחידות מידה כמו: em, %, px וכו׳, מעבר לכך ישנה אפשרות להגדיר מילות מפתח כמו: auto שלמעשה אומר לדפדפן לבגדיר את הגודל על פי ה- width וה- height שמוגדר לאותו אלמנט.
.item {
flex-basis: 10px | 10% | 10em | auto; /* default auto */
}
flex
שימוש בחוק זה יתם לנו קומבינציה של flex-grow, flex-shrink & flex-basis
בהתאמה והוא עדיף על כתיבה של שלושת החוקים האלו בנפרד כדי לצמצם גם את נפח קוד ה- style שלנו.
.item {
flex: none | flex-grow flex-shrink flex-basis;
}
align-self
בעזרת align-self נוכל לקבוע מיקום של אלמנט ספציפי בתוך ה- container שלנו.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
מקורות נוספים:
– https://css-tricks.com/snippets/css/a-guide-to-flexbox
– https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout