CSS3 Flexbox – אלמנטים ילדים

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

order – קביעת הסדר

כל האלמנטים מסודרים מההתחלה לסוף (או מהסוף להתחלה באמצעות flex-direction: row-reverse | column-reverse), אבל אנחנו יכולים לסדר את האלמנטים באמצעות תכונת order. כאן אני נותן לאלמנט החמישי order: 7:

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

.flex-container-13 {
  background: blue;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

.flex-item {
  background: tomato;
  padding: 5px;
  height: 50px;
  width: 100px;
  margin: 10px;  
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
.flex-container-13 > .five {
  order: 7;
}

אם נתתי לו 7, למה הוא מופיע אחרון? התשובה היא פשוטה. הערך הדיפולטיבי הוא אפס – כלומר כל האלמנטים הם 0 וברגע שאני שם למישהו ערך שיותר גדול מאפס הוא יהיה יותר גדול מכל השאר. בהתאמה, אם אני אתן לו 1- (או 12- או כל מספר שלילי אחר), האלמנט הזה יופיע ראשון.

flex-grow קביעת ההתרחבות היחסי של אלמנט הבן

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

כך זה נראה:

• 1
• 2
• 3

וכך זה נכתב:

.flex-container-14 {
  background: blue;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

.flex-container-14 > .flex-item {
  background: tomato;
  padding: 5px;
  height: 50px;
  width: 50px;
  margin: 10px;  
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
.flex-container-14 > * {
  flex-grow: 1;
}
.flex-container-14 > .two {
  flex-grow: 2;
}

flex-shrink קביעת ההתכווצות היחסי של אלמנט הבן

זה בדיוק כמו grow, רק הפוך. אם אני מעוניין שאלמנט בן יתכווץ בשיעור יותר גדול מהאחים שלו, אני אקבע לו flex-shrink בשיעור גבוה יותר משל השאר.

• 1
• 2
• 3
• 4
• 5

.flex-container-15 {
  background: blue;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

.flex-container-15 > .flex-item {
  background: tomato;
  padding: 5px;
  height: 50px;
  margin: 10px;  
  color: white;
  width: 400px;  
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

.flex-container-15 > .two {
  flex-shrink: 2;
}

align-self – מיקום אנכי

ניתן לקבוע מיקום אנכי באמצעות תגית align-self שמקבלת את הערכים הבאים: align-self: auto | flex-start | flex-end | center | baseline | stretch
כאשר ברירת המחדל היא auto. כך למשל אני לוקח את אחד האלמנטים ומצמיד אותו למטה.

• 1
• 2
• 3
• 4
• 5

.flex-container-16 {
  background: blue;
  height: 200px;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

.flex-item {
  background: tomato;
  padding: 5px;
  height: 50px;
  margin: 10px;  
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  width: 100px;
}

.flex-container-16 > .two {
  align-self:  flex-end;
}

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

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