Convert CSS to Flexbox

15 minBeginnerCSS

This feature row was built the 2012 way: float, percentage widths, a margin-right that must be removed from the last card, and a clearfix hack. It works… except the cards have different heights, which looks messy. Modernise it with flexbox.

Before: three floated cards of different heights.
After: three cards side by side, all the same width and the same height, with an even gap between them, and the footer below.

Constraints

.features must be a flex container, and no card may use float.
Use gap (at least 16px) for spacing instead of margins on individual cards.
Don't change the HTML.
The checker measures the layout in a hidden 800px-wide test frame, so a narrow preview pane won't affect your result.

Replace the float layout in style.css with flexbox: three cards in one row, equal widths, equal heights, a gap of at least 16px between them — no floats and no clearfix.

Checks

.features is a flex container
No floats left
One row, equal widths and heights
Even gap of 16px+ and the row fills the width

Preview

Console output from your code appears here.