# 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.md` 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.