How to set default value to align content in CSS ?
Last Updated :
23 May, 2022
In this article, we will learn how to set the default value to align content to its default value in CSS. The align-content property is used to align content within a specified container.
Approach: The normal value of the align-content property is used to set the default value in CSS. It sets its default value to initial which is stretch for align-content property according to flexbox specification.
align-content property values:
- center: Lines are placed in the center of the flex container.
- stretch: The line stretched to take up the remaining space of the flex container. It is the default value.
- flex-start: Displays the lines at the start of the flex container.
- flex-end: Displays the flex lines at the end of the flex container
- space-around: By using the space-around property space will be distributed equally around the flex lines.
- space-between: Displays the flex lines with equal space between them.
The below example demonstrates the above approach.
Example: If the default value of the align-content property is set to normal value.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.box {
width: 36vw;
height: 50vh;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
background-color: darkgreen;
/*default value*/
align-content: normal;
}
#item1,
#item2,
#item3,
#item4 {
box-sizing: border-box;
min-height: 20%;
width: 22%;
border: 1.5px dashed red;
margin: 0.5vw;
display: flex;
align-items: center;
justify-content: center;
}
#item1 {
background-color: lightsalmon;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: pink;
}
#item4 {
background-color: cyan;
}
</ style >
</ head >
< body >
< div class = "box" >
< div id = "item1" >1</ div >
< div id = "item2" >2</ div >
< div id = "item3" >3</ div >
< div id = "item4" >4</ div >
</ div >
</ body >
</ html >
|
Output: All the four items inside the box are aligned to normal value which is stretch in the CSS flexbox.
Share your thoughts in the comments
Please Login to comment...