A navigation bar and a wrapping card row

Build two patterns you will use constantly.

What to build

A bar, a layout row with a sidebar, and cards that wrap.

Requirements

.bar is a flex row with items centred across the bar and a gap of 16px.
.brand is pushed to the far left, with the links grouped on the right, using an auto margin on .brand.
.layout is a flex row where .side has flex: 0 0 200px, and .main has flex: 1 1 0%.
.cards wraps, with a gap of 8px, and each .card has flex: 1 1 200px.

Constraints

Do not use grid or floats.

Example

.spacer { margin-left: auto; } pushes that item, and whatever follows it, to the far end.

Why it works

An automatic margin eats up all the spare room. flex-basis gives each card a starting size, wrapping happens when it no longer fits, and growth fills any remaining gap.

Hints

Hint 1

margin-left auto pushes the links to the far side.

Hint 2

flex 1 1 200px means grow, shrink and start at 200px.

Hint 3

A fixed sidebar should not grow or shrink.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flex</title>
  <style>
    .bar { display: flex; align-items: center; gap: 16px; }
    .brand { margin-right: auto; }
    .layout { display: flex; }
    .side { flex: 0 0 200px; }
    .main { flex: 1 1 0%; }
    .cards { display: flex; flex-wrap: wrap; gap: 8px; }
    .card { flex: 1 1 200px; }
  </style>
</head>
<body>
  <nav class="bar">
    <span class="brand">StepVioz</span>
    <a href="/a">One</a>
    <a href="/b">Two</a>
  </nav>
  <div class="layout">
    <aside class="side">Side</aside>
    <main class="main">Main</main>
  </div>
  <div class="cards">
    <div class="card">A</div>
    <div class="card">B</div>
    <div class="card">C</div>
  </div>
</body>
</html>

Lesson: Flexbox: laying things out in a line →