1.5 פלקסבוקס תרגול

תרגול - פלקסבוקס¶

משחק Flexbox Froggy¶

לפני שמתחילים את התרגילים, מומלץ מאוד לשחק ב-Flexbox Froggy:
https://flexboxfroggy.com

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

בנו navbar עם:
- לוגו בצד שמאל
- 5 קישורי ניווט בצד ימין
- הכל מיושר אנכית במרכז
- רווח של 10px בין הקישורים

השתמשו ב-Flexbox בלבד (בלי float, בלי position). ה-navbar צריך:
- רקע כהה וטקסט לבן
- padding נכון
- הלוגו בצד אחד, הקישורים בצד השני (space-between)

תרגיל 2 - מרכוז מושלם¶

צרו דף עם div שממורכז בדיוק באמצע המסך (גם אופקית וגם אנכית):
- הדף צריך לתפוס את כל גובה החלון (100vh)
- ה-div באמצע צריך להכיל כותרת, פסקה וכפתור
- הכל ממורכז

פתרו את זה באמצעות Flexbox בלבד (3 מאפיינים על ההורה).

תרגיל 3 - רשת כרטיסים¶

צרו רשת של 6 כרטיסי מוצר שעוטפת (wrap) לפי גודל המסך:
- כל כרטיס מינימום 280px רוחב
- הכרטיסים גדלים לתפוס את כל הרוחב הזמין
- רווח של 20px בין הכרטיסים
- כל כרטיס מכיל: כותרת, תיאור, מחיר, וכפתור

דרישה חשובה: המחיר והכפתור צריכים להיות תמיד בתחתית הכרטיס, גם אם לכרטיס אחד יש תיאור ארוך יותר.

רמז: כל כרטיס צריך להיות בעצמו flex container עם flex-direction: column.

בנו footer עם שלוש עמודות:
- עמודה שמאלית: שם חברה ותיאור קצר
- עמודה אמצעית: רשימת קישורים (5 קישורים)
- עמודה ימנית: פרטי קשר (טלפון, אימייל, כתובת)

הדרישות:
- שלוש העמודות בגודל שווה
- רווח של 30px ביניהן
- רקע כהה, טקסט בהיר
- padding נכון סביב

תרגיל 5 - Holy Grail Layout¶

בנו את ה-layout הקלאסי:
- Header ברוחב מלא למעלה
- באמצע: sidebar שמאלי (200px קבוע), תוכן מרכזי (גמיש), sidebar ימני (200px קבוע)
- Footer ברוחב מלא למטה
- ה-Footer צריך להיות תמיד בתחתית הדף, גם אם אין מספיק תוכן (רמז: min-height: 100vh על הlayout ו-flex: 1 על אזור הבאמצע)

תרגיל 6 - סרגל חיפוש¶

בנו סרגל חיפוש עם:
- אייקון חיפוש (אפשר להשתמש בטקסט כמו "Q" או לטעון אייקון) בצד שמאל
- שדה חיפוש שתופס את כל הרוחב הפנוי (flex-grow)
- כפתור "Search" בצד ימין
- כפתור "Filters" נוסף

הכל מיושר אנכית באמצע עם gap קטן ביניהם.

תרגיל 7 - Profile Section¶

בנו סקציה של פרופיל משתמש:
- תמונת פרופיל בצד שמאל
- לצד התמונה (בעמודה): שם, תפקיד, תיאור קצר
- בצד ימין לגמרי: כפתור "Follow"

כל זה בשורה אחת עם Flexbox. ה-follow button צריך להיות בקצה הימני (רמז: margin-right: auto על אזור הטקסט, או justify-content: space-between).

שאלות¶

מה ההבדל בין justify-content ל-align-items?
מה ההבדל בין space-between ל-space-evenly?
מתי נשתמש ב-flex-wrap: wrap ומתי לא?
מה ההבדל בין flex: 1 ל-flex: auto?
איך עושים שפריט אחד ידחוף את כל האחרים לצד? (רמז: margin auto)
למה flex: 0 0 200px טוב ל-sidebar?