flex Component
warning
Components is not ready yet.
Overview
A flexible container component built using CSS Flexbox.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
align | align | Specifies the alignment along the cross axis. | "baseline" | "center" | "flex-end" | "flex-start" | "stretch" | 'center' |
direction | direction | Determines the flex direction. | "column" | "column-reverse" | "row" | "row-reverse" | 'row' |
gap | gap | Sets the gap between flex items. When a number is provided, it is converted to a CSS variable of the form: var(--spacing-{gap}, 1rem). For example, a value of 200 translates to 'var(--spacing-200, 1rem)'. You may also pass a full CSS gap value (e.g. "1rem", "10px", etc.) directly. | number | string | DEFAULT_GAP |
isCenter | is-center | Centers the flex items along both axes if set to true. | boolean | false |
justify | justify | Specifies the alignment along the main axis. | "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | 'flex-start' |
Slots
| Slot | Description |
|---|---|
| Default slot for flex items. |
Built with StencilJS