FlexContainer

ic.FlexContainer is a single-axis layout container built on CSS flexbox. It arranges its children in a row or column and controls their spacing, alignment, and wrapping behavior. Use it whenever you need to lay out components horizontally or vertically without reaching for a full grid.

Direction

Direction sets the main axis. row lays children out left-to-right, column stacks them top-to-bottom. The -reverse variants flip the order without changing the DOM structure, which is useful when you want a visual reorder without changing the logical tab sequence.

Alignment

JustifyContent distributes children along the main axis. AlignItems positions them on the cross axis. The combination of these two properties gives you full control over where children land within the container. The space-between, space-around, and space-evenly options for justify are particularly useful for distributing items across a toolbar or navigation bar.

Wrap

Wrap controls whether children flow onto new lines when they overflow the main axis. The default nowrap keeps everything on one line (children may shrink or overflow). Set it to wrap to let items break to the next row or column. wrap-reverse wraps in the opposite cross-axis direction.

Gap and padding

Gap sets the spacing between children. Padding adds internal space around the entire content area. Both accept a pixel number or a CSS string like "8px 16px" for asymmetric values.

Custom styling

FlexContainer has minimal CSS of its own, just display: flex on .ic-flex. Styling targets the container itself rather than internal parts. This example turns it into a centered card with a gradient background and soft shadow.

f = ic.FlexContainer();
f.Direction = "row";
f.JustifyContent = "center";
f.AlignItems = "center";
f.Gap = 16;
f.Padding = 24;

% Gradient background with rounded corners
f.css.style(".ic-flex", ...
    "background", "linear-gradient(135deg, #e0e7ff, #fce7f3, #fef3c7)", ...
    "border_radius", "12px", ...
    "box_shadow", "0 2px 8px rgba(0,0,0,0.08)");