Flexbox layout (CSS Flexible Box Layout Level 1) #88

Phase 9: Advanced Layout#

Implement CSS Flexbox (Flexible Box Layout Level 1) for one-dimensional layout of items along a main axis.

Dependencies#

• box-sizing should be implemented first
• Viewport units and percentage resolution should be implemented first

Current State#

• display: flex and display: inline-flex are NOT parsed
• No flex-related CSS properties are parsed
• Layout only supports block and inline display modes

Requirements#

1. Parse new display values: flex, inline-flex

2. Parse flex container properties:

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

3. Parse flex item properties:

   • flex-grow: <number> (default 0)
   • flex-shrink: <number> (default 1)
   • flex-basis: <length> | auto (default auto)
   • flex shorthand: none, auto, <grow> <shrink> <basis>
   • align-self: auto (default), flex-start, flex-end, center, baseline, stretch
   • order: <integer> (default 0)

4. Flex layout algorithm (CSS Flexbox Level 1 §9):

   • Determine main axis and cross axis from flex-direction
   • Collect flex items, resolve flex-basis (auto → content size or specified width/height)
   • Distribute free space: grow items with flex-grow, shrink with flex-shrink
   • Handle wrapping: when flex-wrap: wrap, create new flex lines when items exceed main axis size
   • Align items on cross axis per align-items/align-self
   • Distribute flex lines per align-content
   • Justify items on main axis per justify-content
   • Apply order property for visual ordering
   • Apply gap between items

5. Flex formatting context: Flex containers establish a new formatting context for their children

Files to Modify#

• crates/css/src/values.rs — Parse flex shorthand and individual properties
• crates/style/src/computed.rs — Add flex properties to ComputedStyle, resolve values, add Display::Flex/InlineFlex
• crates/layout/src/lib.rs — Implement flex layout algorithm (new major code path alongside block/inline)

Tests#

• display: flex with default settings: items laid out in a row
• flex-direction: column: items stacked vertically
• flex-grow: items expand to fill container
• flex-shrink: items shrink when container is too small
• justify-content: center: items centered on main axis
• align-items: center: items centered on cross axis
• flex-wrap: wrap: items wrap to new line
• gap: correct spacing between items
• order: visual order differs from DOM order

Acceptance Criteria#

• display: flex creates a flex container
• All flex container and item properties work per CSS Flexbox Level 1
• Flex algorithm correctly distributes space (grow/shrink/basis)
• Wrapping, alignment, and justification work correctly
• All tests pass, clippy clean, fmt clean