type

FlexBox

src @Js
class FlexBox : Box

FlexBox lays out child elements based on the CSS Flexbox Layout module, which primarily lays out items along a single axis (the main axis). Alignment can also be specified for the opposite axis (the cross axis).

See also: docDomkit

constructors

fields

alignCross

Define child alignment along cross axis

alignLines

Define how multiple lines of content are aligned when extra space exists in the cross axis

alignMain

Define child alignment along main axis

dir

Direction of the main axis to layout child items

flex

Convenience to configure the shorthand flex values outside of child items, where the list position maps to the index of the child node.

wrap

Define how items are wrapped when content cannot fit in a single line/column

methods

Slot Details

alignCross

src Str alignCross := "center"

Define child alignment along cross axis:

  • "flex-start": items are aligned to top of cross axis
  • "flex-end": items are aligned to bottom of cross axis
  • "center": items are centered along cross axis
  • "baseline": items are aligned so baselines match
  • "stretch": stretch items to fill container

alignLines

src Str alignLines := "stretch"

Define how multiple lines of content are aligned when extra space exists in the cross axis:

  • "flex-start": lines are packed to top of cross axis
  • "flex-end": lines are packed to bottom of cross axis
  • "center": lines are packed along center of cross axis
  • "space-around": extra space is evenly divided between lines
  • "space-between": extra space is evenly divided around lines
  • "stretch": stretch lines to fill container

This value has no effect for single line layouts.

alignMain

src Str alignMain := "flex-start"

Define child alignment along main axis:

  • "flex-start": items are packed toward start of line
  • "flex-end": items are packed toward end of line
  • "center": items are centered along the line
  • "space-between": extra space is evenly distributed between items
  • "space-around": extra space is evenly distributed around items

dir

src Str dir := "row"

Direction of the main axis to layout child items:

  • "row": layout children left to right
  • "column": layout childrent top to bottom

flex

src Str[] flex := Str[,]

Convenience to configure the shorthand flex values outside of child items, where the list position maps to the index of the child node. Any value here will override the value specified in the child.

make

src new make()

onAdd

src protected virtual override Void onAdd(Elem c)

onParent

src protected virtual override Void onParent(Elem p)

onRemove

src protected virtual override Void onRemove(Elem c)

wrap

src Str wrap := "nowrap"

Define how items are wrapped when content cannot fit in a single line/column:

  • "nowrap": do not wrap; items are clipped
  • "wrap: wrap items onto the next line or column