יניב אור- יניב אור
CSS Flexbox
עודכן ב: מרץ 21
פתרונות למשימות נפוצות ב-CSS - בשימוש ב-flex.
משימה - דף עם header, עם footer ועם תוכן ביניהם - כך ששלושת האלמנטים הללו נראים על המסך בכל רגע נתון ובכל רזולוציה, ללא גלילה כשהתוכן נמתח על כל המסך וה-footer מוצמד לחלק התחתון של הדף. בצורה הבאה:
אז אם ה-HTML שלנו נראה כך:
הנה ה-CSS המלא:
על מנת לפשט את ההסבר, הנה גירסה של ה-CSS שאינה כוללת הגדרות עיצוב - כמו צבע, גובה וכדומה:
יש כמה דברים חשובים כדי שהמשימה תצליח. דבר ראשון אנחנו מגדירים את האלמנט שעוטף את שלושת הרכיבים שלנו כ: display: flex ו-flex-direction: column - ומגדירים לו גובה של 100%. גם האלמנטים שעוטפים אותו, חייבים להיות עם גובה של 100%. זה לא יעבוד בצורה אחרת.
הדבר הבא הוא להגדיר את התוכן הראשי, את content, כ-flex: auto ו-overflow: auto.