"/>

לימוד תכנות עם אלעד - CSS 3 : Flex

מהו flex ?

נושא הלימוד היום :

display: flex; 

 

מה זה בכלל flex ? למה הוא משמש ?

flex משמש לעימוד תוכן 

למשל

אם נרצה גלריית תמונות .בגלרייה, 3 תמונות בשורה, בכל הגלרייה – 3 שורות . 

כיצד נעשה זאת ? 

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

אם נרצה למשל עוד, ליצור קופסאות של המוצרים שלנו, או השירותים שלנו . 

 

אחת הדרכים לזה , היא באמצעות flex 

 

flex מאד פופולארי כיום , ורבים עושים בו שימוש במסגרת עימוד האתר 

flex זוהי דרך חדשה לעימוד במסגרת הגרסה החדשה של ה css .

flex מורכב משני חלקים :

חלק העוטף , הנקרא חלק האבא . וחלק פנימי – הילדים . 

למשל :

<!– parent –>

<div class=”container”>

   <!– child 1–>

   <div class=”flex-item”>

   </div>

   <!– child 2–>

   <div class=”flex-item”>

   </div>

</div>

 

אלמנט אבא

יש פקודות השייכות לאבא, ואז משפיעות בבת אחת על כל הילדים.

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

פקודות לאלמנט העוטף (האבא ):

1. flex-direction 

תכונה של CSS שמאפשרת לקבוע את הכיוון של הילדים 

ברירת המחדל היא שורה , ככה :

flex-direction: row;

3 אפשרויות נוספות ,אילו :

flex-direction: row-reverse; //בשורה אבל מהסוף להתחלה

flex-direction: column; //בעימוד של עמודה (אחד מעל השני ) 

flex-direction: column-reverse; //גם בעימוד עמודה אבל בסדר הפוך 

 

2. justify-content

היכן למקם את הקופסאות במסגרת רוחב המסך ?

בתחילת השורה? באמצע? בסוף ?

מביא לכם כאן 5 ערכים :

justify-content: center; //באמצע

justify-content: flex-start; //בהתחלה- ברירת מחדל

justify-content: flex-end; //בסוף

justify-content: space-around; //מרחק שווה בין הקופסאות, וגם בין הקצוות

justify-content: space between; //מרחק שווה בין הקופסאות – צמוד לקצוות

  1.  

 

3. align-items 

היכן למקם את הקופסאות בגובה המסך? בתחילת הגובה, באמצע ? או בסוף ?

לא לשכוח לתת גובה לאלמנט אבא כדי שיהיה התחלה, אמצע וסוף 

align-items: flex-start;  //בהתחלה – ברירת מחדל

align-items: center; //באמצע הגובה

align-items: flex-end; //בסוף הגובה 

 

4. נושא  אחרון – אלמנט אבא – flex-wrap

שימוש בפלקס לאבא – שם את כולם בשורה 

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

אם נרצה שבמידה ואלמנט כבר לא נכנס בשורה, הוא ירד שורה, נשתמש ב :

flex-wrap: wrap;

טוב גם לשימוש בהתאמה למסכים שונים, בהם צריך שהאלמנטים יהיה גמישים לירידת שורה במידה וצריך 

 

אלמנט ילד

אלמנטים ילדים – שני נושאים :

נושא ראשון – רוחב אלמנט ילד 

נקרא בפלקס – flex-basis 

למשל :

flex-basis: 300px;

נושא שני – סדר אלמנטים – order 

ניתן להשפיע על סדר אלמנטים במסך מבלי שישפיע על סדר הקוד ב HTML 

למשל, אם יש לנו 3 קופסאות עם קלאסים בהתאמה : box1, box2, box3 

div.box1{

    order: 3;

}

div.box2{

    order: 1;

}

div.box3{

    order: 2;

}

דילוג לתוכן