הרשמה לניוזלטר

הרשמה לניוזלטר

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

Ⓒ כל הזכויות שמורות ל- Fed Cast – קהילת מפתחי הפרונט בישראל

css flex box children

CSS Flex box – הילדים

אחרי שהבאנו ב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

שלום לך 👋 נעים להכיר.

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

אנחנו לא שולחים ספאם!

רוצים לקבל מאיתנו עדכונים?

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

הרשמה לניוזלטר

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