Rullst AcademyRullst Academy/Lesson
CSS and interface design · Lesson 07 / 12

Flexbox: distribute in one direction

Navigation can grow without squeezing links into an impossible line.

Learning paths14 min

Let's discover together

  1. 1

    Display:flex makes direct children flex items. Flex-direction:row follows the horizontal main axis in our horizontal-writing document; column changes that axis. Justify-content acts on the main axis and align-items on the cross axis.

  2. 2

    Flex-wrap:wrap allows new lines when space runs out; default nowrap does not guarantee that content fits. Gap separates items. Test long words and translations, not only three short labels.

  3. 3

    In the example, .nav is the container. Compare justify-content:flex-start and space-between at both widths. Alignment depends on available space; distributing it does not replace padding or a comfortable interaction area.

  4. 4

    Avoid using order or row-reverse just to reorganize meaning. Visual order may differ from reading and keyboard order. Fix HTML order when content truly needs a different sequence.

Workshop: one interface, different spaces

Edit <style id="lesson-css"> in “My files and GitHub”. The preview applies that CSS to the supplied HTML structure; check HTML edits in the downloaded file. External resources and CSS outside the study subset are not accepted here.

Go to my code

Measurements describe this preview; they do not guarantee every size or complete accessibility. Test long content, zoom, keyboard and assistive technologies in the local project.

Two-color contrast lab

Approximate ratio ·

Calculation only for two opaque sRGB colors selected here; it does not read your page. The threshold uses the unrounded ratio. It does not assess transparency, gradients, images, states or complete conformance.

Official links and next step

✦
YOUR MISSION

Use Flexbox with wrapping, spacing and alignment.

Now it's your turn

Discovery workshop

Predict, change, compare

Navigation with display:flex should wrap and keep 12px between items.
Build your answers and check when you are ready.
A moment to understand

Does changing order guarantee the keyboard follows visual order?

I need a hint

Check the rule, condition and observed result before concluding.

Loading your journey…

Take it with you

Add a long label in the local file and test wrapping and Tab. Record a setup preserving readability and sequence.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Rullstpetbot

AI can make mistakes. Check the lesson material.