class domkit::FlexBox

sys::Obj
  dom::Elem
    domkit::Box
      domkit::FlexBox

@Js

Source

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

alignCross

Str alignCross := "center"

Source

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

Str alignLines := "stretch"

Source

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

Str alignMain := "flex-start"

Source

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

Str dir := "row"

Source

Direction of the main axis to layout child items:

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

flex

Str[] flex := Str[,]

Source

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