CSS
Align Individual Flex Items with align-self
Learn to precisely control the vertical alignment of specific items within a Flexbox container using the `align-self` property, overriding the container's default or `align-items` setting.
.flex-container {
display: flex;
height: 200px; /* For demonstration of vertical alignment */
background-color: #e0e0e0;
align-items: center; /* Default for all items */
padding: 10px;
}
.flex-item {
width: 80px;
padding: 15px;
margin: 5px;
background-color: #f0f0f0;
border: 1px solid #ccc;
text-align: center;
}
.item-start {
align-self: flex-start; /* Overrides align-items for this item */
}
.item-end {
align-self: flex-end; /* Overrides align-items for this item */
}
.item-stretch {
align-self: stretch; /* Overrides align-items for this item */
}
How it works: This snippet demonstrates how `align-self` can be used to control the alignment of individual flex items along the cross-axis, overriding the `align-items` property set on the flex container. The container is set to `align-items: center`, but specific items (`.item-start`, `.item-end`, `.item-stretch`) can independently align themselves to the start, end, or stretch across the container's cross-axis height, offering fine-grained control.