CSS | align-content property - GeeksforGeeks

27 Aug, 2021
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
Syntax:align-content:center;

align-content:center;

Example:htmlhtml<!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>                    
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:
stretch: The line stretched to take the remaining space of flex container. It is the default value.
Syntax:align-content: stretch;

align-content: stretch;

Example:htmlhtml<!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>                    
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:
flex-start: Displays the lines at the start of the flex container.
Syntax:align-content: flex-start;

align-content: flex-start;

Example:htmlhtml<!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>                    
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:
flex-end: Displays the flex lines at the end of the flex container
Syntax:align-content: flex-end;

align-content: flex-end;

Example:htmlhtml<!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>                    
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:
space-around: By using space-around property space will be distributed equally around the flex lines.
Syntax:align-content: space-around;

align-content: space-around;

Example:htmlhtml<!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>                    
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:
space-between: Displays the flex lines with equal space between them.
Syntax:align-content: space-between;

align-content: space-between;

Example:htmlhtml<!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>                    
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:
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-
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
hritikbhatnagar2182
CSS-Properties
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?