CSS align content is used to define the alignment of box items.
This property aligns the flex line within a multi-line flex container if there is extra space available.
Syntax
|
1 |
align-content: 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; flex-wrap: wrap; align-content: space-between; border:1px solid yellow; border-radius:20px; padding:10px; height: 305px; } div.my-container div{ width:100%; padding:2%; } .red{ background:red; } .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 content values list
| Sr. No. | value | Description |
|---|---|---|
| 1 | space-between | Used to evenly distribute the flex items inside the box. The value for this is space-between. |
| 2 | space-around | Used to evenly distribute the flex items inside the box with half size spaces . The value for this is space-between. |
| 3 | flex-start | Used to move flex items to the start of block. The value for this is flex-start. |
| 4 | flex-end | Used to move flex items to the end of block. The value for this is flex-end. |
| 5 | center | Used to move flex items to the center of block. The value for this is center. |
| 6 | stretch | Used to stretch the flex items to fit the block. The value for this is stretch. |
| 7 | initial | Used to define as the property initial value. |
| 8 | inherit | Used to define the computed value of property on the elements parent. |
| 9 | unset | Used to define the property either acts as inherit or initial, depending on the property if it is inherited or not. |