Flexbox Tutorial | SovranCode

Course contentsFlexbox · 16 topics

CSS Foundations

CSS Introduction Selectors and Relationships Cascade, Specificity, and Inheritance Values, Units, and Color

Layout Systems

The Box Model and Sizing Normal Flow, Display, and Positioning Flexbox CSS Grid

Applied CSS Systems

Backgrounds, Borders, and Visual Layers Interactive States and Pseudo-elements Overflow, Stacking Contexts, and Layering Transforms, Transitions, and Animation CSS Architecture, Components, and Maintenance

Responsive and Responsible CSS

Responsive Design and Container Queries Typography and Rhythm Motion, Focus, and Accessibility

CSS 60 min

Flexbox

Build one-dimensional layouts with deliberate wrapping, alignment, and flexible sizing.

Flexbox distributes items along a main axis and aligns them on a cross axis. It works best when one direction drives the layout: a navigation row, button group, media object, or card footer. Let items wrap when space is genuinely limited.

See the core pattern

Read this rule set from the outside in. Identify the inputs, the decision or transformation, and the result before changing it.

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.actions__primary { margin-inline-start: auto; }
.actions > * { flex: 0 1 auto; }

Working rules

Identify the main and cross axes
Use gap instead of margins between siblings
Test long labels and zoom before forcing no-wrap

A common mistake

justify-content and align-items change meaning when flex-direction changes. Always reason from the current axes.

Guided practice

Push one action to the logical end of a row without spacing every item apart.

Copy the example into the editable notebook below.
Change one thing at a time and keep the program or rule valid.
Explain the result in one sentence without relying on jargon.

Lesson review

CSS DEEP DIVE · ABOUT 30 MIN

Build a wrapping action bar

Read the explanation, predict the visual result, then edit and run a complete example. Finish with a repair, an independent build, and a knowledge check.

Determine the axes before choosing alignment

Flexbox arranges direct children along a main axis. flex-direction chooses that axis, while alignment uses it as a reference: justify-content distributes main-axis free space and align-items controls cross-axis alignment. A row is not inherently left-to-right because writing direction also matters. Allow wrapping when labels no longer fit, and remember that each wrapped line distributes its own space. If rows and columns must align as a shared two-dimensional system, consider Grid instead of forcing unrelated flex lines to match.

Shrinking depends on the item as well as the container

flex-grow distributes positive free space; flex-shrink helps resolve negative free space, weighted by the flex basis. The automatic minimum size can stop an item from shrinking below its content-based minimum. For a text region that should shrink and wrap, min-width: 0 may be necessary alongside an appropriate wrapping policy. Auto margins consume available space before justify-content distributes it, making margin-inline-start: auto useful for separating one action group. Do not use order to create a visual sequence that contradicts reading or keyboard order.

Let long text shrink and wrap

Predict the difference, then compare the rendered boxes. Both versions use the same HTML.

Before repair

.row { display:flex; width:240px; gap:8px; } .text { flex:1; }

After repair

.row { display:flex; width:240px; gap:8px; } .text { flex:1; min-width:0; overflow-wrap:anywhere; }

Before: the text item's automatic minimum preserves the long unbroken label. After: min-width:0 permits shrinking and overflow-wrap:anywhere supplies break opportunities. Both rules contribute to the repair.

Inspect the shared HTML

<div class="row"><span class="tile">CSS</span><p class="text">averylongunbrokenlabelthatcannotfitinsideanarrowtoolbar</p></div>

Apply the repair in the saved editor below, then test a narrower width and longer content.

Narrow the preview until the actions wrap. Change flex-direction to column and explain which axis justify-content now controls.

Saved CSS practice

Edit the CSS inside the style element. Account work syncs; guest work stays on this device.

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { font: 1rem/1.6 system-ui; padding: 1rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1rem; background: #edf2f7; }
.actions a { padding: .75rem; color: #173c88; }
.actions .primary { margin-inline-start: auto; background: #173c88; color: white; }
</style>
</head>
<body>
<nav class="actions" aria-label="Lesson actions"><a href="#overview">Overview</a><a href="#notes">Study notes and examples</a><a class="primary" href="#continue">Continue learning</a></nav><p id="overview">Lesson overview</p><p id="notes">Your notes</p><p id="continue">Next step</p>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { font: 1rem/1.6 system-ui; padding: 1rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1rem; background: #edf2f7; }
.actions a { padding: .75rem; color: #173c88; }
.actions .primary { margin-inline-start: auto; background: #173c88; color: white; }
</style>
</head>
<body>
<nav class="actions" aria-label="Lesson actions"><a href="#overview">Overview</a><a href="#notes">Study notes and examples</a><a class="primary" href="#continue">Continue learning</a></nav><p id="overview">Lesson overview</p><p id="notes">Your notes</p><p id="continue">Next step</p>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Run in new window

Loading saved work…

Edit the CSS inside the style element and compare the result in the live preview. Your work saves automatically; you can also download a local copy.

DEBUGGING CHALLENGE

Find the faulty assumption

Explain the problem and write your repair before opening the solution.

.row { display: flex; }
.description { flex: 1; white-space: nowrap; }

Reveal repair and explanation

.row { display: flex; }
.description { flex: 1; min-width: 0; overflow-wrap: anywhere; }

Allow the text item to shrink and wrap instead of forcing a single unbroken line. Test with a long word, not only short placeholder labels.

INDEPENDENT LAB

Build it without copying

Build a toolbar with navigation links and a primary action. Preserve logical source order and support both short and long labels.

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Build a wrapping action bar lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Build a wrapping action bar</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Build a wrapping action bar lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Build a wrapping action bar</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Self-review checklist

The toolbar wraps without clipping actions at narrow widths.You can identify the main and cross axes for row and column directions.Keyboard order agrees with the visual reading order.

What did you test and change?

Loading saved work…

This lab is saved separately from the worked example. The checklist is a self-review, not an automatic grade.

CSS knowledge check

Answer both questions correctly to pass this lesson check. Account scores are recomputed on the server. This is a learning check, not certification.

1. With flex-direction: column in a horizontal writing mode, which axis does justify-content use?HorizontalVerticalBoth equally

2. A flex text item refuses to shrink. Which minimum often needs adjustment?min-width: 0z-index: 999opacity: 0

Loading saved work…