Teaching step

Where justify-content's free space went

MediumAlignmentF14

justify-content: space-around is on the container, spelled correctly, computing correctly, and the buttons are packed hard against the left edge with one stranded on the right. Changing it to space-evenly changes nothing. Changing it to center changes nothing.

A 640px toolbar with four 80px buttons. The base stylesheet says justify-content: space-around, and you are not going to need to remove it. Put the first three buttons together at the left edge, touching, and delete on its own at the right edge — and keep it that way when the toolbar changes width. Then look at what space-around is doing in the finished layout.

Hint

There are two things in flexbox that can consume free space. Which of them gets asked first — and what happens to the other one when the answer is 'all of it'?

Live preview1000×280

Your stylesheet

checked in a real browser, four ways

The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="bar"><div class="btn bold"></div><div class="btn italic"></div><div class="btn link"></div><div class="btn trash"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.bar { width: 640px; height: 96px; display: flex; align-items: center; justify-content: space-around; background: #16161d; }
.btn { flex: none; width: 80px; height: 56px; background: #7bdff2; }
.trash { background: #ff8fa3; }