CSS
Fine-tuning Vertical Alignment in Flex Containers
Master advanced Flexbox vertical alignment for elements of varying heights, ensuring perfect visual harmony for labels, icons, and text content.
.align-container {
display: flex;
align-items: flex-start; /* Default, or can be 'stretch', 'center', 'flex-end', 'baseline' */
gap: 15px;
padding: 20px;
background-color: #f0f8ff;
border: 1px solid #b3d9ff;
margin-bottom: 20px;
}
.align-item {
padding: 10px 15px;
background-color: #e0f2fe;
border: 1px solid #90caf9;
border-radius: 4px;
font-size: 1rem;
}
/* Align items to their baselines */
.baseline-alignment .align-item {
background-color: #ffe0b2;
border-color: #ffcc80;
}
.baseline-alignment {
align-items: baseline;
}
.baseline-alignment .tall-item {
font-size: 1.5rem; /* Make one item taller to demonstrate baseline */
line-height: 1.2;
}
/* Align a specific item differently */
.individual-alignment .center-item {
align-self: center; /* Override container's align-items */
background-color: #c8e6c9;
border-color: #a5d6a7;
}
.individual-alignment .start-item {
align-self: flex-start;
}
.individual-alignment .end-item {
align-self: flex-end;
}
/* Example HTML structure */
/*
<div class="align-container baseline-alignment">
<div class="align-item">Short Text</div>
<div class="align-item tall-item">Taller Text Example</div>
<div class="align-item">Another Item</div>
</div>
<div class="align-container individual-alignment">
<div class="align-item start-item">Top</div>
<div class="align-item center-item">Middle</div>
<div class="align-item end-item">Bottom</div>
</div>
*/
How it works: This snippet demonstrates advanced vertical alignment techniques using Flexbox. It illustrates how `align-items` can globally align items within a flex container, with a special focus on `baseline` for textual alignment. Additionally, it shows how `align-self` can override the container's `align-items` property for individual flex items, allowing for precise control over their vertical positioning (e.g., `center`, `flex-start`, `flex-end`).