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.



    This section is empty.


    This section is empty.


    This section is empty.


    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.

                      Source Files