flex

Documentation

Overview

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.

Index

• type AlignContent
• type AlignItem
• type Basis
• type Direction
• type Flex
  • func NewFlex(children ...node.Node) *Flex
  • func (w *Flex) Layout(t *theme.Theme)
  • func (w *Flex) Measure(t *theme.Theme, widthHint, heightHint int)
• type FlexWrap
• type Justify
• type LayoutData

Types

type AlignContent

type AlignContent uint8

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

https://www.w3.org/TR/css-flexbox-1/#align-content-property

const (
	AlignContentStretch AlignContent = iota
	AlignContentStart
	AlignContentEnd
	AlignContentCenter
	AlignContentSpaceBetween
	AlignContentSpaceAround
)

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.

https://www.w3.org/TR/css-flexbox-1/#align-items-property https://www.w3.org/TR/css-flexbox-1/#propdef-align-self

const (
	AlignItemAuto AlignItem = iota
	AlignItemStart
	AlignItemEnd
	AlignItemCenter
	AlignItemBaseline // TODO requires introducing inline-axis concept
	AlignItemStretch
)

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
	Definite
)

type Direction

type Direction uint8

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

https://www.w3.org/TR/css-flexbox-1/#flex-direction-property

const (
	Row Direction = iota
	RowReverse
	Column
	ColumnReverse
)

type Flex

type Flex struct {
	node.ContainerEmbed

	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.

https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property

const (
	NoWrap FlexWrap = iota
	Wrap
	WrapReverse
)

type Justify

type Justify uint8

Justify aligns items along the main axis.

https://www.w3.org/TR/css-flexbox-1/#justify-content-property

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.