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.

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

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

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

רספברי פיי

הרצת גו על רספברי פיי

עולם הרספברי פיי והמייקרים ניתן לתפעול בכל שפה – לא רק פייתון או C – כאן אני מסביר על גו

פתרונות ומאמרים על פיתוח אינטרנט

נגישות טכנית – פודקאסט ומבוא

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

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