CSS align self is used to align the single flex of box items.
This property aligns single items inside flex container.
Syntax
|
1 |
align-self: enter value for alignment |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style> div.my-container{ display: flex; align-items: center; border:1px solid yellow; border-radius:20px; padding:10px; height: 305px; } div.my-container div{ width:100%; padding:2%; } .red{ background:red; align-self:flex-end; } .blue{ background:blue; } .green{ background:green; } </style> <div class="my-container"> <div class="red"></div> <div class="blue"></div> <div class="green"></div> </div> |
Output
CSS align self values list
| Sr. No. | value | Description |
|---|---|---|
| 1 | flex-start | Used to move flex items to the start of block. The value for this is flex-start. |
| 2 | flex-end | Used to move flex items to the end of block. The value for this is flex-end. |
| 3 | center | Used to move flex items to the center of block. The value for this is center. |
| 4 | stretch | Used to stretch the flex items to fit the block. The value for this is stretch. |
| 5 | initial | Used to define as the property initial value. |
| 6 | inherit | Used to define the computed value of property on the elements parent. |
| 7 | unset | Used to define the property either acts as inherit or initial, depending on the property if it is inherited or not. |