Flex Items

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Learn how flex item sizing works

Flex items support flex-grow, flex-shrink, flex-basis, order, and more. In short, flex: 1; tells items to split up the remaining space equally. flex: 1 1 280px; is a practical shorthand meaning: can grow, can shrink, and defaults to a size of 280px.

css

.pricing-card {
  flex: 1 1 280px;
}

.featured-card {
  order: -1;
  flex-grow: 1.3;
}

You should see

The pricing cards get responsive widths, and you can bump the featured card ahead of the others.

Warning

order changes the visual order but doesn't change the HTML/source order. Keep accessibility and keyboard navigation in mind.