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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...