Appearance
flexbox
The flexbox component creates a flexible one-dimensional layout container, similar to CSS Flexbox. It allows you to arrange child elements in rows or columns with advanced alignment and spacing options.
Examples
Basic Row Layout
Column Layout with Wrapping
Props
| Property | Type | Default | Description |
|---|---|---|---|
| direction | enum(row, column) | row | Sets main layout direction (horizontal or vertical) |
| justify | enum(start, end, center, between, around) | start | Aligns items along the main axis |
| items | enum(start, end, center) | start | Aligns items along the cross axis |
| wrap | boolean | false | Enables wrapping of items to new lines when they exceed container dimensions |
| gap | vec2 | 0 0 | Sets spacing between items. First value is main axis gap, second is cross axis gap |
Justify Values Explained
- start: Items are positioned at the beginning of the container
- end: Items are positioned at the end of the container
- center: Items are centered in the container
- between: Items are evenly distributed with the first item at the start and the last item at the end
- around: Items are evenly distributed with equal space around them
Items Alignment Values Explained
- start: Items are aligned to the start of the cross axis
- end: Items are aligned to the end of the cross axis
- center: Items are centered along the cross axis
How Gap Works
The gap property adds spacing between items in the flexbox container. It creates consistent spacing between each element without affecting their size.
When you set gap: 10 20:
- The first value (
10) adds horizontal spacing between elements - The second value (
20) adds vertical spacing between elements
In row layouts with wrapping, the vertical gap affects the space between rows. In column layouts with wrapping, the horizontal gap affects the space between columns.
Notes
- The flexbox container must be a primitive that has width and height (box, plane, entity with geometry)