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

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

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.

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

Direction of the main axis to layout child items:

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

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.

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