← Month 2 — Modern CSS & layoutWeek 232 min

Flexbox in depth

Objectives

Master: display:flex
Master: align-items
Master: gap

Lesson

This lesson is part of the year-long Code Academy Alfred path. Goal: understand display:flex, align-items, gap in real web / mobile-web design conditions.

Flexbox aligns on a main axis. flex-direction, justify-content, align-items, gap cover 80% of toolbars and cards.

flex: 1 distributes space. min-width: 0 prevents text overflow in flex items.

On mobile, a column (flex-direction: column) + gap replaces a lot of improvised margins.

Practice immediately: rebuild the example, then change it. Memory comes from active repetition, not passive reading.

If you get stuck, use Cursor with a precise prompt (context + goal + constraints), then explain the generated diff yourself.

Practice lab

Make .row flex with gap and justify-content.

○ display: flex○ gap○ justify-content

<style>
      .row { display: block; }
      .item { background: #0f7f78; color: white; padding: 12px; }
    </style>
    <div class="row">
      <div class="item">A</div>
      <div class="item">B</div>
      <div class="item">C</div>
    </div>

Assessment

1. What is the main topic of “Flexbox in depth”?

Previous Next