CSS
Vertical Alignment in Multi-Line Flex Containers (align-content)
Control how rows are distributed and aligned vertically within a multi-line Flexbox container, effectively managing vertical space for complex, wrapped layouts.
/* CSS */
.flex-container {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to new lines */
height: 300px; /* Explicit height to demonstrate vertical alignment of lines */
border: 2px dashed #ccc;
padding: 10px;
/* Align content lines along the cross-axis */
/* Try: center, flex-start, flex-end, space-between, space-around, stretch */
align-content: space-around;
}
.flex-item {
width: 100px;
height: 70px;
margin: 10px;
background-color: #b3e5fc;
border: 1px solid #03a9f4;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
/* HTML */
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
</div>
How it works: This snippet illustrates the use of `align-content` in a multi-line Flexbox container. When `flex-wrap: wrap;` is applied, flex items can wrap onto new lines. `align-content` then controls how these *lines of items* are distributed and aligned along the container's cross-axis (vertically, in a row-direction flex container). In this example, `space-around` distributes space evenly around each line. This is distinct from `align-items`, which aligns individual items *within their own line*. Providing an explicit height for the container is essential to observe the effects of `align-content`.