Layout System and Styling

Freya’s layout system is powerful and flexible. In this tutorial, I’ll show you how to control layout and styling effectively.

Related: Check out my blog post on Building Freya GUI with AI where I explain how I used AI to help me build these complex layouts.

Layout Direction

By default, elements flow vertically. Change this with the direction builder method:

rect()
    .direction(Direction::Horizontal)  // or Direction::Vertical
    // children

Spacing Properties

Freya provides spacing properties using Margin and Padding:

rect()
    .margin(10.0)              // All sides
    .padding(15.0)             // All sides
    // Specific sides can often be set via helper methods or structs depending on the API version,
    // e.g. Margin::new(top, right, bottom, left) if available, or individual methods.

Alignment

Control alignment within containers using main_align and cross_align (similar to flexbox):

rect()
    .width(Size::fill())
    .height(100.0)
    .cross_align(Alignment::Center)    // Cross-axis (e.g., vertical center in horizontal row)
    .main_align(Alignment::Center)     // Main-axis (e.g., horizontal center in horizontal row)
    .child(label().text("Centered content"))

Sizing

Control element sizes using the Size enum:

rect()
    .width(Size::fill())           // 100% of parent
    .width(Size::Fixed(400.0))     // 400 pixels
    .height(Size::Dynamic)         // Auto / Content size
    .min_width(200.0)
    .max_width(800.0)

What’s Next

Next, I’ll explore state management in Freya applications.

Summary

• direction controls horizontal/vertical flow
• margin and padding handle spacing
• main_align and cross_align control positioning
• Size enum handles fixed, percentage (fill), or dynamic sizing