Ask any question about CSS here... and get an instant response.

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.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How do I create equal-height columns using Flexbox?

Asked on Sep 07, 2025

Answer

The Q&A Network