Back to

Package flex

v0.0.0 (0022984)
Latest Go to latest
Published: May 13, 2020 | License: BSD-3-Clause | Module:


Package flex provides a container widget that lays out its children following the CSS flexbox algorithm.

As the shiny widget model does not provide all of the layout features of CSS, the flex package diverges in several ways. There is no item inline-axis, no item margins or padding to be accounted for, and the container size provided by the outer widget is taken as gospel and never expanded.


Package Files

type AlignContent

type AlignContent uint8

AlignContent is the 'align-content' property. It aligns container lines when there is extra space on the cross-axis.

const (
	AlignContentStretch AlignContent = iota

type AlignItem

type AlignItem uint8

AlignItem aligns items along the cross axis.

It is the 'align-items' property when applied to a Flex container, and the 'align-self' property when applied to an item in LayoutData.

const (
	AlignItemAuto AlignItem = iota
	AlignItemBaseline // TODO requires introducing inline-axis concept

type Basis

type Basis uint8

Basis sets the base size of a flex item.

A default basis of Auto means the flex container uses the MeasuredSize of an item. Otherwise a Definite Basis will override the MeasuredSize with BasisPx.

TODO: do we (or will we )have a useful notion of Content in the widget layout model that is separate from MeasuredSize? If not, we could consider completely removing this concept from this flex implementation.

const (
	Auto Basis = iota

type Direction

type Direction uint8

Direction is the direction in which flex items are laid out.

const (
	Row Direction = iota

type Flex

type Flex struct {

	Direction    Direction
	Wrap         FlexWrap
	Justify      Justify
	AlignItems   AlignItem
	AlignContent AlignContent

Flex is a container widget that lays out its children following the CSS flexbox algorithm.

func NewFlex

func NewFlex(children ...node.Node) *Flex

NewFlex returns a new Flex widget containing the given children.

func (*Flex) Layout

func (w *Flex) Layout(t *theme.Theme)

func (*Flex) Measure

func (w *Flex) Measure(t *theme.Theme, widthHint, heightHint int)

type FlexWrap

type FlexWrap uint8

FlexWrap controls whether the container is single- or multi-line, and the direction in which the lines are laid out.

const (
	NoWrap FlexWrap = iota

type Justify

type Justify uint8

Justify aligns items along the main axis.

const (
	JustifyStart        Justify = iota // pack to start of line
	JustifyEnd                         // pack to end of line
	JustifyCenter                      // pack to center of line
	JustifySpaceBetween                // even spacing
	JustifySpaceAround                 // even spacing, half-size on each end

type LayoutData

type LayoutData struct {
	MinSize image.Point  // TODO use unit.Value
	MaxSize *image.Point // TODO use unit.Value

	// Grow determines how much a node will grow relative to its siblings.
	Grow float64

	// Shrink is the flex shrink factor which determines how much a node
	// will shrink relative to its siblings. If nil, a default shrink
	// factor of 1 is used.
	Shrink *float64

	// Basis determines the initial size of the node in the direction
	// of the flex container (the main axis).
	// If set to Definite, the value stored in BasisPx is used.
	Basis   Basis
	BasisPx int // TODO use unit package?

	Align AlignItem

	// BreakAfter forces the next node onto the next flex line.
	BreakAfter bool

LayoutData is the node LayoutData type for a Flex's children.

Documentation was rendered with GOOS=linux and GOARCH=amd64.

Jump to identifier

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to identifier