Container
1100px centered flex container. Place inside section for centered, max-width content.
Type: "container" · Accepts children
1100px centered flex container. Place inside section for centered, max-width content.
Props
| Field | Type | Default | Description |
|---|---|---|---|
htmlTag | 'div'|'section'|'article'|'aside'|'nav'|'header'|'footer'|'main'|'a'|'figure'|'address'|'ul'|'ol'|'li' | "div" | HTML Tag |
href | string (URL) | — | URL (shown when htmlTag = a) |
hrefTarget | '_self'|'_blank' | "_self" | Target (shown when htmlTag = a) |
layoutMode | 'simple'|'advanced' | "simple" | — |
display | 'flex'|'grid'|'block'|'inline-block'|'inline'|'none' | "flex" | Display (shown when layoutMode = advanced) |
direction | enum | "column" | Direction (shown when layoutMode = advanced & display = flex & masonry ≠ true) |
flexWrap | 'nowrap'|'wrap'|'wrap-reverse' | "nowrap" | Flex Wrap (shown when layoutMode = advanced & display = flex & masonry ≠ true) |
alignSelf | 'flex-start'|'center'|'flex-end'|'stretch' | — | Align Self (shown when layoutMode = advanced & display = flex) |
justifyContent | 'flex-start'|'center'|'flex-end'|'space-between'|'space-around'|'space-evenly' | — | Align Main Axis (shown when layoutMode = advanced & display = flex & masonry ≠ true) |
alignItems | 'flex-start'|'center'|'flex-end'|'stretch'|'baseline' | — | Align Cross Axis (shown when layoutMode = advanced & display = flex & masonry ≠ true) |
gap | string | — | Gap (shown when display = grid & masonry ≠ true) |
gridTemplateColumns | string | — | Grid Template Columns (shown when layoutMode = advanced & display = grid & masonry ≠ true) |
gridTemplateRows | string | — | Grid Template Rows (shown when layoutMode = advanced & display = grid & masonry ≠ true) |
gridAutoColumns | string | — | Grid Auto Columns (shown when layoutMode = advanced & display = grid & masonry ≠ true) |
gridAutoRows | string | — | Grid Auto Rows (shown when layoutMode = advanced & display = grid & masonry ≠ true) |
gridAutoFlow | ''|'row'|'column'|'dense'|'row dense'|'column dense' | — | Grid Auto Flow (shown when layoutMode = advanced & display = grid & masonry ≠ true) |
justifyItems | 'start'|'center'|'end'|'space-between'|'space-around'|'space-evenly' | — | Justify Items (shown when layoutMode = advanced & display = grid & masonry ≠ true) |
alignItemsGrid | 'start'|'center'|'end'|'stretch'|'baseline' | — | Align Items (shown when layoutMode = advanced & display = grid & masonry ≠ true) |
justifyContentGrid | 'start'|'center'|'end'|'space-between'|'space-around'|'space-evenly' | — | Justify Content (shown when layoutMode = advanced & display = grid & masonry ≠ true) |
alignContent | 'start'|'center'|'end'|'stretch' | — | Align Content (shown when layoutMode = advanced & display = grid & masonry ≠ true) |
flexGrow | number (0–∞) | — | Grow (shown when layoutMode = advanced & display = flex) |
flexShrink | number (0–∞) | — | Shrink (shown when layoutMode = advanced & display = flex) |
flexBasis | string | — | Flex Basis (shown when layoutMode = advanced & display = flex) |
order | number | — | Order (shown when layoutMode = advanced & display ≠ none) |
Example
{
"id": "con01abc",
"type": "container",
"props": {},
"children": []
}