CSS Flexbox Example: Cards in a Row with Gap

The question

Create a <div class="row"> containing 5 <div class="card"> elements. Use CSS Flexbox so the cards sit side by side (display: flex) with a gap of 8px.

The code

<div class="row">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
</div>

<style>
.row {
  display: flex;
  gap: 8px;
}
.card { padding: 10px; border: 1px solid #999; }
</style>

Result

How it works

1. 1display: flex goes on the parent (.row), not on the cards.
2. 2The children then line up in a row automatically.
3. 3gap adds equal space between them — no margins needed.