CSS
Creating Equal Height Columns with CSS Flexbox
Learn to easily create responsive column layouts where all columns automatically match the height of the tallest one using CSS Flexbox's `align-items: stretch` property.
.flex-container {
display: flex;
align-items: stretch; /* This is the key for equal heights */
gap: 20px; /* Spacing between columns */
padding: 20px;
background-color: #f0f0f0;
}
.flex-item {
flex: 1; /* Allows items to grow and shrink proportionally */
padding: 20px;
background-color: white;
border: 1px solid #ddd;
display: flex; /* Make item itself a flex container for internal content */
flex-direction: column;
}
.flex-item:nth-child(1) { height: 100px; } /* Example: short content */
.flex-item:nth-child(2) { height: 200px; } /* Example: tall content */
.flex-item:nth-child(3) { height: 150px; } /* Example: medium content */
How it works: This snippet demonstrates how Flexbox makes creating equal-height columns simple. By setting `display: flex` on the container and `align-items: stretch` (which is the default value, but explicitly stated for clarity), all direct children (flex items) will automatically stretch to the height of the tallest item in the row. The `flex: 1` property on the items allows them to grow and shrink to fill available space, making the layout responsive.