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

במאמר הזה אני ממשיך בהסבר על flexbox ועכשיו עם הסברים על אלמנטים ילדים.
קוד CSS של פלקסבוקס

במאמר הקודם דיברנו על פלקסבוקס ועל אלמנט האב שיכול לקבוע את ההתנהגות של האלמנטים הילדים. במאמר הזה אני אדבר על תכונות של האלמנטים הילדים בפלקסבוקס. מדובר בתכונות שאנו נותנים לאלמנטים שנמצאים מתחת לקונטיינר (כלומר האלמנט שמקבל 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.

פוסטים נוספים שכדאי לקרוא

רספברי פיי

התקנת OpenCanary על רספברי פיי

מה זה OpenCanary ואיך אפשר להתקין אותה על רספברי פיי ולשדרג את אבטחת הרשת הביתית או המשרדית.

תמונה של עציץ, רספברי פיי ורמקול
רספברי פיי

לגרום לעציץ שלכם לדבר

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

גלילה לראש העמוד