המאפיין align-self
מאפשר להגדיר איך אלמנט מסוים ייושר לאורך ציר ה-cross (הציר המשני), בצורה שונה מהאלמנטים האחרים במיכל.
auto
- ברירת מחדל. משתמש בהגדרה של align-items
של המיכל.flex-start
- מיישר את האלמנט בצד ההתחלה של הציר.center
- מיישר את האלמנט במרכז הציר.flex-end
- מיישר את האלמנט בצד הסיום של הציר.stretch
- מאריך את האלמנט כך שיתפוס את כל הגובה של המיכל.baseline
- מיישר את האלמנט לפי הקו הבסיסי של הטקסט.להלן דוגמה לשימוש במאפיין align-self
:
<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>
רק רגע