Column & Row

Flex containers that arrange children along a single axis. Column lays out children vertically, Row lays out children horizontally.

Basic Usage

// Vertical layout
widgets.Column{
    MainAxisAlignment:  widgets.MainAxisAlignmentStart,
    CrossAxisAlignment: widgets.CrossAxisAlignmentStretch,
    MainAxisSize:       widgets.MainAxisSizeMin,
    Children: []core.Widget{
        header,
        content,
        footer,
    },
}

// Horizontal layout
widgets.Row{
    MainAxisAlignment:  widgets.MainAxisAlignmentSpaceBetween,
    CrossAxisAlignment: widgets.CrossAxisAlignmentCenter,
    Children: []core.Widget{
        avatar,
        widgets.Expanded{Child: title},
        menuButton,
    },
}

Properties

Property	Type	Description
MainAxisAlignment	MainAxisAlignment	How children are positioned along the main axis
CrossAxisAlignment	CrossAxisAlignment	How children are positioned along the cross axis
MainAxisSize	MainAxisSize	How much space the container takes along the main axis
Children	[]core.Widget	Child widgets

Main Axis Alignment

Controls how children are positioned along the main axis:

Alignment	Effect
MainAxisAlignmentStart	Pack at start
MainAxisAlignmentEnd	Pack at end
MainAxisAlignmentCenter	Center children
MainAxisAlignmentSpaceBetween	Equal space between, none at edges
MainAxisAlignmentSpaceAround	Equal space around each child
MainAxisAlignmentSpaceEvenly	Equal space everywhere

widgets.Row{
    MainAxisAlignment:  widgets.MainAxisAlignmentSpaceEvenly,
    CrossAxisAlignment: widgets.CrossAxisAlignmentCenter,
    Children: []core.Widget{cancelButton, saveButton},
}

Cross Axis Alignment

Controls how children are positioned along the cross axis:

Alignment	Effect
CrossAxisAlignmentStart	Align to start edge
CrossAxisAlignmentEnd	Align to end edge
CrossAxisAlignmentCenter	Center children
CrossAxisAlignmentStretch	Stretch to fill cross axis

widgets.Column{
    CrossAxisAlignment: widgets.CrossAxisAlignmentStretch,
    Children: []core.Widget{cardOne, cardTwo},
}

Main Axis Size

Controls how much space the flex container takes:

Size	Effect
MainAxisSizeMax (default)	Take all available space
MainAxisSizeMin	Take minimum needed space

MainAxisSizeMax is the zero value, so Row{} and Column{} expand to fill their parent by default. Set MainAxisSizeMin explicitly when you want shrink-wrap behavior.

widgets.Column{
    MainAxisSize: widgets.MainAxisSizeMin,  // Only as tall as content
    Children:     items,
}

Spacing

Use VSpace and HSpace for consistent gaps:

widgets.Column{
    MainAxisSize: widgets.MainAxisSizeMin,
    Children: []core.Widget{
        header,
        widgets.VSpace(16),  // 16px vertical gap
        body,
        widgets.VSpace(24),
        footer,
    },
}

widgets.Row{
    CrossAxisAlignment: widgets.CrossAxisAlignmentCenter,
    MainAxisSize:       widgets.MainAxisSizeMin,
    Children: []core.Widget{
        icon,
        widgets.HSpace(8),   // 8px horizontal gap
        label,
    },
}

Related

• Expanded & Flexible for distributing space among children
• Wrap for flow layout that wraps to new lines
• Layout System for how constraints flow through the tree