CSS
Distribute Space Between Multiple Lines of Flex Items
Effectively manage spacing along the cross-axis for wrapped flex items using 'align-content', perfect for tag clouds, galleries, or multi-row layouts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Align-Content</title>
<style>
body {
font-family: sans-serif;
}
.flex-container {
display: flex;
flex-wrap: wrap;
height: 300px; /* Explicit height to show align-content effect */
width: 400px;
border: 2px solid #333;
margin-bottom: 20px;
background-color: #f0f0f0;
}
.flex-item {
background-color: lightcoral;
border: 1px solid #900;
padding: 15px;
margin: 5px;
text-align: center;
flex-basis: 120px; /* Fixed width to ensure wrapping */
}
.container-start {
align-content: flex-start;
}
.container-end {
align-content: flex-end;
}
.container-center {
align-content: center;
}
.container-space-between {
align-content: space-between;
}
.container-space-around {
align-content: space-around;
}
.container-stretch {
align-content: stretch; /* Default */
}
</style>
</head>
<body>
<h1>Flexbox 'align-content' for Wrapped Items</h1>
<p>The container has a fixed height to illustrate 'align-content'.</p>
<h2>align-content: flex-start (Default)</h2>
<div class="flex-container container-start">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>
<h2>align-content: center</h2>
<div class="flex-container container-center">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>
<h2>align-content: space-between</h2>
<div class="flex-container container-space-between">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>
<h2>align-content: space-around</h2>
<div class="flex-container container-space-around">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>
</body>
</html>
How it works: This snippet illustrates the use of the `align-content` property in Flexbox, which is crucial for controlling the distribution of space between *lines* of flex items when `flex-wrap: wrap` is applied. Unlike `align-items` (which aligns items within a single line), `align-content` defines how the entire flex container's cross-axis space is distributed among the wrapped lines. This allows for layouts where items are grouped and spaced vertically, such as in tag clouds, image galleries, or multi-row card layouts, making better use of available vertical space.