מה זה justify-content?

המאפיין justify-content קובע איך האלמנטים בתוך מיכל גמיש יוצגו לאורך ציר ה-main (הציר הראשי). הוא מסייע לשלוט על חלוקת הרווחים בין האלמנטים ואיזור התצוגה.

ערכים

• flex-start - מיישר את האלמנטים בצד ההתחלה של הציר.
• center - מיישר את האלמנטים במרכז הציר.
• flex-end - מיישר את האלמנטים בצד הסיום של הציר.
• space-between - מפזר את האלמנטים כך שהמרווחים ביניהם שווים.
• space-around - מפזר את האלמנטים כך שהמרווחים בין האלמנטים לקצוות שווים.
• space-evenly - מפזר את האלמנטים כך שכל המרווחים, כולל הקצוות, שווים.

דוגמה לשימוש ב-justify-content

להלן דוגמה לשימוש במאפיין justify-content עם ערך space-around:

    
          <style>
            .container {
              display: flex;
              justify-content: space-around;
              border: 2px solid black;
            }
            .item {
              background-color: lightgoldenrodyellow;
              margin: 5px;
              padding: 10px;
            }
          </style>
          <div class="container">
            <div class="item">אלמנט 1</div>
            <div class="item">אלמנט 2</div>
            <div class="item">אלמנט 3</div>
          </div>