align-self

מגדיר איך אלמנט מסוים ייושר לאורך ציר ה-cross באופן עצמאי מהאלמנטים האחרים.

מה זה align-self?

המאפיין align-self מאפשר להגדיר איך אלמנט מסוים ייושר לאורך ציר ה-cross (הציר המשני), בצורה שונה מהאלמנטים האחרים במיכל.

ערכים

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

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

להלן דוגמה לשימוש במאפיין align-self:

אלמנט 1

אלמנט 2 - align-self: flex-start;

אלמנט 3

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

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