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
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
flex
make
src
new make()