Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the alignment between the items inside a flexible container when the items do not use all available space with JavaScript?
The alignContent property in JavaScript controls how flex lines are distributed within a flex container when there's extra space on the cross axis. This property only works when items wrap to multiple lines.
Syntax
element.style.alignContent = "value";
Available Values
The alignContent property accepts these values:
-
flex-start- Lines packed toward the start -
flex-end- Lines packed toward the end -
center- Lines packed toward the center -
space-between- Lines evenly distributed -
space-around- Lines with equal space around them -
stretch- Lines stretch to fill the container (default)
Example
Here's how to dynamically change the alignment of flex items using JavaScript:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px solid #333;
width: 300px;
height: 200px;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
#box div {
height: 60px;
width: 80px;
margin: 2px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div id="box">
<div style="background-color: #e74c3c;">DIV1</div>
<div style="background-color: #3498db;">DIV2</div>
<div style="background-color: #f39c12;">DIV3</div>
<div style="background-color: #2ecc71;">DIV4</div>
</div>
<br>
<button onclick="setSpaceBetween()">Space Between</button>
<button onclick="setCenter()">Center</button>
<button onclick="setFlexStart()">Flex Start</button>
<script>
function setSpaceBetween() {
document.getElementById("box").style.alignContent = "space-between";
}
function setCenter() {
document.getElementById("box").style.alignContent = "center";
}
function setFlexStart() {
document.getElementById("box").style.alignContent = "flex-start";
}
</script>
</body>
</html>
How It Works
The alignContent property only affects multi-line flex containers. When items wrap to multiple lines, this property controls how those lines are spaced within the container's cross axis.
Key Points
- Requires
flex-wrap: wraporflex-wrap: wrap-reverse - Only works when there's extra space in the cross axis
- Different from
alignItemswhich aligns individual items - Default value is
stretch
Browser Compatibility
The alignContent property is supported in all modern browsers including Chrome, Firefox, Safari, and Edge.
Conclusion
Use alignContent to control the distribution of flex lines in wrapped flex containers. It provides powerful control over multi-line layouts when items don't fill all available space.
152 Views
