Layout

Guido uses a flexbox-style layout system for arranging widgets. The Flex layout handles rows and columns with spacing and alignment options.

Basic Layout

Row (Horizontal)

#![allow(unused)]
fn main() {
container()
    .layout(Flex::row())
    .children([
        text("Left"),
        text("Center"),
        text("Right"),
    ])
}

Column (Vertical)

#![allow(unused)]
fn main() {
container()
    .layout(Flex::column())
    .children([
        text("Top"),
        text("Middle"),
        text("Bottom"),
    ])
}

Spacing

Add space between children:

#![allow(unused)]
fn main() {
container()
    .layout(Flex::row().spacing(8.0))
    .children([...])
}

Main Axis Alignment

Control distribution along the layout direction:

#![allow(unused)]
fn main() {
Flex::row().main_alignment(MainAlignment::Center)
}

Options

Visual Examples

Start:        [A][B][C]
Center:          [A][B][C]
End:                      [A][B][C]
SpaceBetween: [A]      [B]      [C]
SpaceAround:   [A]    [B]    [C]
SpaceEvenly:    [A]   [B]   [C]

Cross Axis Alignment

Control alignment perpendicular to the layout direction:

#![allow(unused)]
fn main() {
Flex::row().cross_alignment(CrossAlignment::Center)
}

Options

Visual Example (Row)

Start:    ┌───┐┌─┐┌──┐
          │ A ││B││ C│
          └───┘│ │└──┘
               └─┘

Center:        ┌─┐
          ┌───┐│B│┌──┐
          │ A │└─┘│ C│
          └───┘   └──┘

End:           ┌─┐
               │B│
          ┌───┐└─┘┌──┐
          │ A │   │ C│
          └───┘   └──┘

Stretch:  ┌───┐┌─┐┌──┐
          │   ││ ││  │
          │ A ││B││ C│
          │   ││ ││  │
          └───┘└─┘└──┘

Complete Example

#![allow(unused)]
fn main() {
container()
    .layout(
        Flex::row()
            .spacing(16.0)
            .main_alignment(MainAlignment::SpaceBetween)
            .cross_alignment(CrossAlignment::Center)
    )
    .padding(20.0)
    .children([
        text("Left").font_size(24.0),
        container()
            .layout(Flex::column().spacing(4.0))
            .children([
                text("Center"),
                text("Items"),
            ]),
        text("Right").font_size(24.0),
    ])
}

Nested Layouts

Combine rows and columns for complex layouts:

#![allow(unused)]
fn main() {
container()
    .layout(Flex::column().spacing(16.0))
    .children([
        // Header row
        container()
            .layout(Flex::row().main_alignment(MainAlignment::SpaceBetween))
            .children([
                text("Logo"),
                text("Menu"),
            ]),
        // Content row
        container()
            .layout(Flex::row().spacing(16.0))
            .children([
                sidebar(),
                main_content(),
            ]),
        // Footer row
        container()
            .layout(Flex::row().main_alignment(MainAlignment::Center))
            .child(text("Footer")),
    ])
}

Size Constraints

Control how children size within layouts:

Fixed Size

#![allow(unused)]
fn main() {
container()
    .width(200.0)
    .height(100.0)
}

Minimum/Maximum

#![allow(unused)]
fn main() {
container()
    .min_width(100.0)
    .max_width(300.0)
}

At Least

Request at least a certain size:

#![allow(unused)]
fn main() {
container()
    .width(at_least(200.0))  // At least 200px, can grow
}

Fill Available Space

Make a container expand to fill all available space:

#![allow(unused)]
fn main() {
container()
    .height(fill())  // Fills available height
    .width(fill())   // Fills available width
}

This is particularly useful for root containers that should fill their surface, or for creating layouts where children are centered within the full available space:

#![allow(unused)]
fn main() {
container()
    .height(fill())
    .layout(
        Flex::row()
            .main_alignment(MainAlignment::Center)
            .cross_alignment(CrossAlignment::Center)
    )
    .child(text("Centered in available space"))
}

Layout Without Explicit Flex

Containers without .layout() stack children (each child fills the container):

#![allow(unused)]
fn main() {
// Children overlap, each filling the container
container()
    .children([
        background_image(),
        overlay_content(),
    ])
}

API Reference

Flex Builder

#![allow(unused)]
fn main() {
Flex::row() -> Flex                    // Horizontal layout
Flex::column() -> Flex                 // Vertical layout
.spacing(f32) -> Flex                  // Space between children
.main_alignment(MainAlignment) -> Flex
.cross_alignment(CrossAlignment) -> Flex
}

MainAlignment

#![allow(unused)]
fn main() {
MainAlignment::Start
MainAlignment::Center
MainAlignment::End
MainAlignment::SpaceBetween
MainAlignment::SpaceAround
MainAlignment::SpaceEvenly
}

CrossAlignment

#![allow(unused)]
fn main() {
CrossAlignment::Start
CrossAlignment::Center
CrossAlignment::End
CrossAlignment::Stretch
}