beyond More pages

From “Learn Flexbox CSS in 8 minutes” by Slaying The Dragon

Learn Flexbox CSS: axes, alignment and item properties

Once the axes click, flexbox stops being a mystery.

Open the interactive page →Make a page from any YouTube video

Key points

Setting display: flex on a container lays its children out along a main axis (horizontal by default) instead of stacking them, and flex-direction: column flips that axis to vertical. 0:21
justify-content aligns items along the main axis, while align-items aligns them along the cross axis, so keeping the two axes straight is the key to flexbox. 2:18
By default flex items squeeze onto one line, so flex-wrap: wrap is needed to move them onto new lines, and align-content only has an effect once items are actually wrapping. 3:12
Item-level properties such as flex-grow and flex-shrink go on the direct children: flex-grow 1 fills leftover space, and flex-shrink 0 stops an item from shrinking. 4:20
The video advises avoiding the order property unless you absolutely must, because reordering items with it breaks the semantics and accessibility of the HTML. 7:54

Terms

Main axis — The invisible axis along which flex items are positioned; horizontal by default. 0:25
Cross axis — The axis perpendicular to the main axis; vertical by default. 2:39
justify-content — Aligns items on the main axis. 1:06
align-items — Aligns items on the cross axis. 1:49
flex-basis — Sets the size of an item before remaining space is distributed; it overrides a width. 5:44

What the preview shows along the way

Main axis arrow — A red arrow labelled MAIN AXIS runs horizontally across the browser preview.
Items at container bottom — Three items sit at the bottom of the container with space-evenly and align-items: center applied.
Shrink applied to item one — Item 1 is narrower than the others in the preview after flex-shrink: 5 is written.

Will it work in my browser?

Property: display · Chrome: 1 · Firefox: 1 · Safari: 1 · Edge: 12
Property: justify-content · Chrome: 29 · Firefox: 20 · Safari: 9 · Edge: 12
Property: align-items · Chrome: 29 · Firefox: 20 · Safari: 9 · Edge: 12
Property: flex-grow · Chrome: 29 · Firefox: 20 · Safari: 9 · Edge: 12

Questions to check yourself

Which property aligns items on the main axis?

justify-content — justify-content aligns items along the main axis, while align-items works on the cross axis. 1:40

What does flex-wrap: wrap do?

Lets items flow onto new lines when space runs out — With wrap, items move to a new line instead of crushing into one line. 3:20

What does order: -1 do to an item?

Moves it to appear first — A negative order places the item before items with the default order of 0. 7:36

More pages like this

Lessons and exam prep →