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 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; } .Beginner { font-size:40px; text-align:center; color:#009900; font-weight:bold; } </ style > </ head > < body > < div class = "Beginner" >w3wiki</ 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;
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; } .Beginner { font-size:40px; text-align:center; color:#009900; font-weight:bold; } </ style > </ head > < body > < div class = "Beginner" >w3wiki</ 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;
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; } .Beginner { font-size:40px; text-align:center; color:#009900; font-weight:bold; } </ style > </ head > < body > < div class = "Beginner" >w3wiki</ 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;
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; } .Beginner { font-size:40px; text-align:center; color:#009900; font-weight:bold; } </ style > </ head > < body > < div class = "Beginner" >w3wiki</ 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;
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; } .Beginner { font-size:40px; text-align:center; color:#009900; font-weight:bold; } </ style > </ head > < body > < div class = "Beginner" >w3wiki</ 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;
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; } .Beginner { font-size:40px; text-align:center; color:#009900; font-weight:bold; } </ style > </ head > < body > < div class = "Beginner" >w3wiki</ 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 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
Contact Us