פרק 8: תצוגות (Displays)

בפרק זה נלמד על:

• ההבדל בין תצוגות שונות
• שימוש בתצוגות Block ו-inline
• שימוש בתצוגת flex

ההבדל בין תצוגות שונות

המאפיין display ב-CSS קובע כיצד האלמנטים יוצגו על המסך. ישנם סוגים שונים של תצוגות:

• Block: האלמנט תופס את כל הרוחב של הקו ויוצג בשורה חדשה. לדוגמה: <div>, <h1>.
• Inline: האלמנט תופס רק את הרוחב הדרוש לו ואינו שובר את השורה. לדוגמה: <span>, <a>.
• Inline-block: השילוב בין Block ו-inline - תופס רק את הרוחב הדרוש לו אך יכול להכיל גבולות, רווחים ורוחב.
• None: האלמנט לא יוצג על המסך.

שימוש בתצוגות Block ו-inline

תצוגת Block ו-inline משפיעות על הדרך שבה האלמנטים מוצגים בדף:

          
            .block-element {
              display: block;
              width: 100%;
              background-color: lightblue;
            }
            
            .inline-element {
              display: inline;
              background-color: lightgreen;
            }
          
        

שימוש בתצוגת flex

תצוגת flex מאפשרת ליצור עיצובים גמישים ומתקדמים. לדוגמה:

          
            .flex-container {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            
            .flex-item {
              flex: 1;
              background-color: lightcoral;
              margin: 5px;
            }