Skip to content
Related Articles

Related Articles

How to set default value to align content in CSS ?

View Discussion
Improve Article
Save Article
  • Last Updated : 23 May, 2022
View Discussion
Improve Article
Save Article

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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!