ui_layout

A unified layout engine for Rust GUI development that treats Flexbox as a specialized form of Inline Block Flow layout.

This crate provides predictable layout system designed for custom GUI frameworks, editors, and experimental UI engines.

[!NOTE] This crate is under active development; patch releases may be frequent. CSS3 Specification Compliance: Phase 1 improvements have been implemented for CSS Box Model and Flexbox.

Features

Flexbox Support

Flex layout (Row / Column direction)
flex_grow with proportional space distribution
flex_shrink with proportional space reduction when overflowing
flex_basis for initial sizing (supports auto, pixel values, and percentages)
justify_content (Start, Center, End, SpaceBetween, SpaceAround, SpaceEvenly)
align_items with full stretch support (Start, Center, End, Stretch)
align_self for individual item alignment override
Row and column gaps (row_gap / column_gap)

Non-goals

Full CSS compatibility
Inline or text layout
Absolute / fixed positioning
Web rendering or HTML/CSS parsing

Design goals

Simple and explicit layout rules
Easy to reason about and debug
Suitable for custom renderers (wgpu, skia, etc.)
No dependency on web standards or DOM

Example

use ui_layout::*;

// Create a flex container
let mut root = LayoutNode::with_children(
    Style {
        display: Display::Flex {
            flex_direction: FlexDirection::Row,
        },
        size: SizeStyle {
            width: Length::Px(300.0),
            height: Length::Px(200.0),
            ..Default::default()
        },
        justify_content: JustifyContent::SpaceBetween,
        align_items: AlignItems::Center,
        column_gap: Length::Px(20.0),
        ..Default::default()
    },
    vec![
        LayoutNode::new(Style {
            item_style: ItemStyle {
                flex_grow: 1.0,
                flex_basis: Length::Auto,
                ..Default::default()
            },
            ..Default::default()
        }),
        LayoutNode::new(Style {
            item_style: ItemStyle {
                flex_basis: Length::Px(100.0),
                flex_shrink: 0.0,
                ..Default::default()
            },
            ..Default::default()
        }),
    ],
);

// Layout with viewport size
LayoutEngine::layout(&mut root, 800.0, 600.0);

// Access results
match &root.layout_boxes {
    LayoutBoxes::Single(box_model) => {
        println!("Container: {}x{}", box_model.border_box.width, box_model.border_box.height);
    },
    _ => {}
}

For more examples and to understand the behavior of gaps, alignment, and sizing, see the unit tests in the tests/ directory. They provide practical usage patterns and expected layouts.

Specification Compliance

This implementation follows CSS3 specifications with current focus on:

✅ CSS Box Model Module Level 3: Full margin collapsing, padding, border, box-sizing support
✅ CSS Flexible Box Layout Module Level 1: Complete flexbox algorithm including flex-grow, flex-shrink, flex-basis
✅ CSS Display Module Level 3: Block, Inline, Flex, and None display values
✅ CSS Values and Units Module Level 3: px, %, vw, vh, auto, and calc() support

Status

See CHANGELOG.md for a detailed list of changes.

Version: 0.9.8
API is evolving but now includes full Flexbox-like alignment and gaps
Phase 1 improvements: Enhanced margin collapsing, improved flex item min-size semantics, comprehensive specification references

Future versions may add:

grid
Flex wrap support (flex-wrap: wrap | nowrap | wrap-reverse)
Flex direction reverse (flex-direction: row-reverse | column-reverse)
Additional flex sizing rules (fr units, etc.)
Absolute / fixed positioning
Display: inline-block explicit support
Complete parent-child margin collapsing
Content-based minimum sizing for flex items
Correct flex-basis priority over width/height in flex item sizing

License

MIT

ui_layout 0.9.8