align-items

מיישר את האלמנטים לאורך ציר ה-cross.

מה זה align-items?

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

ערכים

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

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

להלן דוגמה לשימוש במאפיין align-items עם ערך center:

אלמנט 1

אלמנט 2

אלמנט 3

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

    
          <style>
            .container {
              display: flex;
              align-items: center;
              height: 200px;
              border: 2px solid black;
            }
            .item {
              background-color: lightseagreen;
              margin: 5px;
              padding: 10px;
            }
          </style>
          <div class="container">
            <div class="item">אלמנט 1</div>
            <div class="item">אלמנט 2</div>
            <div class="item">אלמנט 3</div>
          </div>