CSS
Distributing Space Between Rows in Multi-line Flexbox
Learn to control how space is distributed between multiple lines of flex items using the `align-content` property when `flex-wrap: wrap` is enabled, for structured multi-row layouts.
.flex-container {
display: flex;
flex-wrap: wrap; /* Essential for align-content to take effect */
height: 300px; /* Fixed height to demonstrate space distribution */
border: 2px solid #d63384;
background-color: #fce4ec;
padding: 10px;
/* Try different values: flex-start, flex-end, center, space-between, space-around, stretch */
align-content: space-between; /* Distributes space evenly between rows */
}
.flex-item {
flex: 0 0 100px; /* Fixed width items */
height: 60px; /* Fixed height items */
margin: 5px; /* Margin for internal spacing, but gap is better */
background-color: #e83e8c;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.1em;
}
How it works: When a flex container has `flex-wrap: wrap` and its items don't fit on a single line, `align-content` dictates how the available free space is distributed *between* these multiple lines along the cross-axis. This property works similarly to `justify-content` but operates on lines themselves, not individual items. Values like `space-between`, `center`, or `stretch` provide powerful control over the overall multi-row layout.