← Back to documentation
Section
A mostly flex-based general purpose layout container that can be used for more than that.
Information
Plan: Personal
Properties
| Property | Type | Default |
|---|---|---|
| Width | string | "100%" |
| Minimum width | string | "auto" |
| Maximum width | string | "none" |
| Height | string | "auto" |
| Minimum height | string | "auto" |
| Maximum height | string | "none" |
| Aspect ratio | string | "auto" |
| Flexbox grow | string | "0" |
| Flexbox shrink | string | "1" |
| Overflow | enum<string> | "visible" |
| Flexbox direction | enum<string> | "column" |
| Flexbox wrap | enum<string> | "nowrap" |
| Align content | enum<string> | "normal" |
| Align items | enum<string> | "stretch" |
| Justify content | enum<string> | "stretch" |
| Align self | enum<string> | "auto" |
| Justify self | enum<string> | "auto" |
| Gap | string | "1rem" |
| Grid template columns | string | "none" |
| Grid template rows | string | "none" |
| Grid template areas | string | "none" |
| Justify items | enum<string> | "legacy" |
| Margin | string | "0px" |
| Margin top | string | "" |
| Margin right | string | "" |
| Margin bottom | string | "" |
| Margin left | string | "" |
| Padding | string | "clamp(1rem, 3vw, 4rem)" |
| Padding top | string | "" |
| Padding right | string | "" |
| Padding bottom | string | "" |
| Padding left | string | "" |
| Display | enum<string> | "flex" |
| Position | enum<string> | "relative" |
| Top | string | "auto" |
| Right | string | "auto" |
| Bottom | string | "auto" |
| Left | string | "auto" |
| Z-index | string | "auto" |
| Transform | string | "none" |
| Transform origin | string | "50% 50% 0" |
| Container type | string | "normal" |
| Background color | string | "initial" |
| Background | string | "none" |
| Background image | string | "initial" |
| Background size | string | "initial" |
| Background position | string | "initial" |
| Background repeat | string | "initial" |
| Background blend mode | string | "initial" |
| Box shadow | string | "none" |
| Opacity | string | "1" |
| Backdrop filter | string | "none" |
| Border width | string | "0px" |
| Border top width | string | "initial" |
| Border right width | string | "initial" |
| Border bottom width | string | "initial" |
| Border left width | string | "initial" |
| Border color | string | "transparent" |
| Border radius | string | "0px" |
| Element | enum<string> | "div" |
| Font family | string | "inherit" |
| Font size | string | "inherit" |
| Font weight | string | "inherit" |
| Font style | string | "inherit" |
| Line height | string | "inherit" |
| Text decoration | string | "none" |
| Color | string | "inherit" |
| Text shadow | string | "none" |
| Text align | enum<string> | "inherit" |
| Is visible | boolean | true |
| Selectors | array | [] |