Tutorialspoint.dev

CSS | align-content property

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 it only applicable if flex-wrap: wrap is applied i.e. if there are multiple lines of flexbox items present.

List of align-content property:

  • center
  • stretch
  • flex-start
  • flex-end
  • space-around
  • space-between

center: Lines are placed on the center of flex container.
Syntax:

align-content:center;

Example:

<!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:

<!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:

<!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:

<!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:

<!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:

<!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



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter