type
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
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 |
wrap |
Define how items are wrapped when content cannot fit in a single line/column |
methods
Slot Details
alignCross
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
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
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
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
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
new make()
onAdd
onParent
onRemove
wrap
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