חיפוש
  • יניב אור

CSS Flexbox

עודכן ב: מרץ 21

פתרונות למשימות נפוצות ב-CSS - בשימוש ב-flex.


משימה - דף עם header, עם footer ועם תוכן ביניהם - כך ששלושת האלמנטים הללו נראים על המסך בכל רגע נתון ובכל רזולוציה, ללא גלילה כשהתוכן נמתח על כל המסך וה-footer מוצמד לחלק התחתון של הדף. בצורה הבאה:


אז אם ה-HTML שלנו נראה כך:


הנה ה-CSS המלא:


על מנת לפשט את ההסבר, הנה גירסה של ה-CSS שאינה כוללת הגדרות עיצוב - כמו צבע, גובה וכדומה:


יש כמה דברים חשובים כדי שהמשימה תצליח. דבר ראשון אנחנו מגדירים את האלמנט שעוטף את שלושת הרכיבים שלנו כ: display: flex ו-flex-direction: column - ומגדירים לו גובה של 100%. גם האלמנטים שעוטפים אותו, חייבים להיות עם גובה של 100%. זה לא יעבוד בצורה אחרת.


הדבר הבא הוא להגדיר את התוכן הראשי, את content, כ-flex: auto ו-overflow: auto.



פרטים נוספים בהמשך...

© 2023 by DO IT YOURSELF. Proudly created with Wix.com