Advanced Flexbox — Allowed

This gauge covers the promoted Flexbox chapter after Phase 5.

Learning goal

Control flex axes, wrapping, free-space distribution, item alignment, line alignment, and visual order without damaging logical source order.

Inherited tools

Everything allowed through ./phase5-allowed.html remains available.

Flex container properties

• display: flex
• flex-direction: row, row-reverse, column, column-reverse
• justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly
• align-items: stretch, flex-start, flex-end, center, baseline
• gap
• flex-wrap: nowrap, wrap, wrap-reverse
• align-content: normal, stretch, flex-start, flex-end, center, space-between, space-around, space-evenly

Flex item properties

• flex-grow: unitless numbers zero or greater
• flex-shrink: unitless numbers zero or greater
• flex-basis: auto, content, 0, or an allowed length/percentage
• flex: shorthand for grow, shrink, and basis
• align-self: auto, stretch, flex-start, flex-end, center, baseline
• order: positive, zero, or negative integers

Learning rules

1. Flex properties affect direct children of a flex container.
2. Wrapping creates multiple flex lines only when items do not fit.
3. flex-basis supplies an item’s starting main size before free space is distributed.
4. flex-grow divides positive free space using relative factors.
5. flex-shrink helps remove negative free space; content and minimum sizes can still limit shrinking.
6. Read flex: 1 1 14rem as grow 1, shrink 1, basis 14rem.
7. align-self overrides align-items for one item.
8. align-content distributes multiple flex lines and needs spare cross-axis space; it does not align items within a line.
9. order changes visual placement only. Keep DOM reading and keyboard order logical.

Not allowed

• JavaScript
• Typography/background-presentation tools introduced in Phase 6 (font-family, font-style, @font-face, background-size)
• Positioning and stacking tools introduced in Phase 7
• Media queries and inline styles
• Any HTML tag or CSS property not inherited or listed above

Pages

• 01-playground.html — axes, justification, alignment, direction, and gap
• 02-navbar.html — practical navigation alignment
• 03-cards.html — card row and item alignment
• 04-split.html — split content alignment
• 05-stack.html — column layouts
• 06-wrapping.html — nowrap, wrap, and wrap-reverse
• 07-flexible-sizing.html — basis, grow, shrink, and shorthand
• 08-item-line-alignment.html — align-self versus align-content
• 09-order.html — visual order and source-order accessibility

Rules to lean on

Rules 7–10, 42, 72–80, and 81–88, plus the Phase 5 sizing, unit, overflow, contrast, and accessibility rules.