Skip to content
Related Articles

Related Articles

CSS | align-content property

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Aug, 2022
View Discussion
Improve Article
Save Article

The align-content property changes the behavior of the flex-wrap property. It aligns flex lines. It is used to specify the alignment between the lines inside a flexible container. This property defines how each flex line is aligned within a flexbox and is only applicable if flex-wrap: wrap is applied i.e. if there are multiple lines of flexbox items present. 

List of align-content property values:

  • center
  • stretch
  • flex-start
  • flex-end
  • space-around
  • space-between
  • start
  • end
  • normal
  • baseline, first baseline, last baseline
  • space-evenly
  • safe
  • unsafe

Description of property value with example:

center: Displays the flex lines at the center of the flex container.

Syntax:

align-content:center;

Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>align-content property</title>
        <style>
            .main-container {
                display: flex;
                height: 400px;
                flex-wrap: wrap;
                align-content: center;
                background-color: green;
            }
             
            .main-container div {
                background-color: #f4f4f4;
                width: 100px;
                margin: 10px;
                text-align: center;
                font-size: 50px;
            }
            h2 {
                text-align:center;
            }
            .geeks {
                font-size:40px;
                text-align:center;
                color:#009900;
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div class = "geeks">GeeksforGeeks</div>
        <h2>align-content: center;</h2>
        <div class="main-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </div>
    </body>
</html>                   

Output: 

align content center

stretch: The line stretched to take the remaining space of flex container. It is the default value.

Syntax:

align-content: stretch;

Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>align-content property</title>
        <style>
            .main-container {
                display: flex;
                height: 400px;
                flex-wrap: wrap;
                align-content: stretch;
                background-color: green;
            }
             
            .main-container div {
                background-color: #f4f4f4;
                width: 100px;
                margin: 10px;
                text-align: center;
                font-size: 50px;
            }
            h2 {
                text-align:center;
            }
            .geeks {
                font-size:40px;
                text-align:center;
                color:#009900;
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div class = "geeks">GeeksforGeeks</div>
        <h2>align-content: stretch;</h2>
        <div class="main-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </div>
    </body>
</html>                   

Output:

 align content stretch

flex-start: Displays the lines at the start of the flex container.

Syntax:

align-content: flex-start;

Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>align-content property</title>
        <style>
            .main-container {
                display: flex;
                height: 400px;
                flex-wrap: wrap;
                align-content: flex-start;
                background-color: green;
            }
             
            .main-container div {
                background-color: #f4f4f4;
                width: 100px;
                margin: 10px;
                text-align: center;
                font-size: 50px;
            }
            h2 {
                text-align:center;
            }
            .geeks {
                font-size:40px;
                text-align:center;
                color:#009900;
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div class = "geeks">GeeksforGeeks</div>
        <h2>align-content: flex-start;</h2>
        <div class="main-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </div>
    </body>
</html>                   

Output:

 align-content flex-start

flex-end: Displays the flex lines at the end of the flex container

Syntax:

align-content: flex-end;

Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>align-content property</title>
        <style>
            .main-container {
                display: flex;
                height: 400px;
                flex-wrap: wrap;
                align-content: flex-end;
                background-color: green;
            }
             
            .main-container div {
                background-color: #f4f4f4;
                width: 100px;
                margin: 10px;
                text-align: center;
                font-size: 50px;
            }
            h2 {
                text-align:center;
            }
            .geeks {
                font-size:40px;
                text-align:center;
                color:#009900;
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div class = "geeks">GeeksforGeeks</div>
        <h2>align-content: flex-end;</h2>
        <div class="main-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </div>
    </body>
</html>                   

Output:

 align-content flex-end

space-around: By using space-around property space will be distributed equally around the flex lines.

Syntax:

align-content: space-around;

Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>align-content property</title>
        <style>
            .main-container {
                display: flex;
                height: 400px;
                flex-wrap: wrap;
                align-content: space-around;
                background-color: green;
            }
             
            .main-container div {
                background-color: #f4f4f4;
                width: 100px;
                margin: 10px;
                text-align: center;
                font-size: 50px;
            }
            h2 {
                text-align:center;
            }
            .geeks {
                font-size:40px;
                text-align:center;
                color:#009900;
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div class = "geeks">GeeksforGeeks</div>
        <h2>align-content: space-around;</h2>
        <div class="main-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </div>
    </body>
</html>                   

Output:

 align-content space-around

space-between: Displays the flex lines with equal space between them.

Syntax:

align-content: space-between;

Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>align-content property</title>
        <style>
            .main-container {
                display: flex;
                height: 400px;
                flex-wrap: wrap;
                align-content: space-between;
                background-color: green;
            }
             
            .main-container div {
                background-color: #f4f4f4;
                width: 100px;
                margin: 10px;
                text-align: center;
                font-size: 50px;
            }
            h2 {
                text-align:center;
            }
            .geeks {
                font-size:40px;
                text-align:center;
                color:#009900;
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div class = "geeks">GeeksforGeeks</div>
        <h2>align-content: space-between;</h2>
        <div class="main-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </div>
    </body>
</html>                   

Output:

 align-content space between

Supported browser: The browser supported by CSS | align-content property are listed below:

  • Google Chrome 29.0 and above
  • Edge 12.0 and above
  • Internet Explorer 11.0 and above
  • Firefox 28.0 and above
  • Opera 12.1 and above
  • Safari 9.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!