sys::Obj dom::Elem domkit::Box domkit::FlexBox
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
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
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.
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
Str dir := "row"
Direction of the main axis to layout child items:
- "row": layout children left to right
- "column": layout childrent top to bottom
Str flex := Str[,]
Convenience to configure the shorthand
flexvalues 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.
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