How do I create equal-height columns using Flexbox?
Asked on Sep 07, 2025
Answer
To create equal-height columns using Flexbox, you can utilize the `display: flex` property on the container element. This ensures that all child elements (columns) have the same height by default.
<!-- BEGIN COPY / PASTE -->
<div style="display: flex;">
<div style="flex: 1; background-color: lightblue; padding: 10px;">
Column 1
</div>
<div style="flex: 1; background-color: lightcoral; padding: 10px;">
Column 2
</div>
<div style="flex: 1; background-color: lightgreen; padding: 10px;">
Column 3
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- Using `display: flex` on the parent container makes all child elements (columns) flex items.
- The `flex: 1` property ensures that each column takes up an equal share of the available space.
- Flexbox automatically aligns items to have equal height, matching the tallest item.
- Padding and background colors are optional for visual clarity.
Recommended Links: