נושא הלימוד היום :
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; //מרחק שווה בין הקופסאות – צמוד לקצוות
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;
}