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.