align-content

מיישר את הקווים בתיבת הגמישות לאורך ציר ה-cross כאשר יש יותר מקו אחד.

מה זה align-content?

המאפיין align-content קובע איך הקווים של האלמנטים בתיבת גמישות יוצגו לאורך ציר ה-cross (הציר המשני). הוא משפיע על יישור הקווים כאשר יש יותר מקו אחד.

ערכים

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

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

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

אלמנט 1

אלמנט 2

אלמנט 3

אלמנט 4

אלמנט 5

אפשר להגדיר את זה לדוגמה כך

    
          <style>
            .container {
              display: flex;
              flex-wrap: wrap;
              align-content: space-between;
              height: 300px;
              border: 2px solid black;
            }
            .item {
              background-color: lightgoldenrodyellow;
              margin: 5px;
              padding: 10px;
              width: 100px;
            }
          </style>
          <div class="container">
            <div class="item">אלמנט 1</div>
            <div class="item">אלמנט 2</div>
            <div class="item">אלמנט 3</div>
            <div class="item">אלמנט 4</div>
            <div class="item">אלמנט 5</div>
          </div>