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:
- 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><divclass="geeks">GeeksforGeeks</div><h2>align-content: center;</h2><divclass="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:
<!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><divclass="geeks">GeeksforGeeks</div><h2>align-content: stretch;</h2><divclass="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:
<!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><divclass="geeks">GeeksforGeeks</div><h2>align-content: flex-start;</h2><divclass="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:
<!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><divclass="geeks">GeeksforGeeks</div><h2>align-content: flex-end;</h2><divclass="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:
<!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><divclass="geeks">GeeksforGeeks</div><h2>align-content: space-around;</h2><divclass="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:
<!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><divclass="geeks">GeeksforGeeks</div><h2>align-content: space-between;</h2><divclass="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 Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.
