Skip to content
Related Articles

Related Articles

CSS | align-content property
  • Last Updated : 06 Aug, 2019

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:

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

Description of property value with example

    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

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

  • Google Chrome 21.0
  • Internet Explorer 11.0
  • Firefox 28.0
  • Opera 12.1
  • Safari 9.0, 7.0 -webkit-
My Personal Notes arrow_drop_up
Recommended Articles
Page :