Flex Container

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

What you'll walk away with

Learn to use flex container properties

To use Flexbox, you set display: flex; on the parent element. The parent is called a flex container, and its children become flex items. On the container, you can control the items with flex-direction, justify-content, align-items, gap, flex-wrap, and more.

css

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
}

.feature-card {
  flex: 1 1 240px;
}

You should see

The feature cards line up in a row and wrap when the screen gets narrow. Each card keeps a minimum width of around 240px and stays responsive.

Tip

gap is much cleaner than using margin hacks. You can use it in both Flexbox and Grid.