אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » CSS3 » CSS3 Flexbox – אלמנטים ילדים

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

רן בר-זיק מרץ 29, 2015 7:33 am אין תגובות

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

»CSS flexbox – אלמנט אב
»Media Queries
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
CSS3

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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