Skip to content
Related Articles

Related Articles

Improve Article

How to set default value to align content in CSS ?

  • Last Updated : 28 Jun, 2021

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 default value in CSS. It sets its default value to initial which is stretch for align-content property according to flexbox specification.

Syntax:

align-content: normal;

The below example demonstrates the above approach.

Example: If the default value of 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 CSS flexbox.

Supported Browser: 

  • Google Chrome 21.0
  • Internet Explorer 11.0
  • Firefox 28.0
  • Opera 12.1
  • Safari 9.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :