Box
The <Box /> component is designed to a simple interface to creating a Flexbox <div>, with shorthand props for quick access to css flexbox properties like align-items (align) and justify-content (justify).
- Presentation
- Source
Hello <Box> component.
@candy/kitkat/box
<Box><p>Children</p></Box>Component API
| Name | Type | Default | Description |
|---|---|---|---|
children | String/ReactNode | - | Content |
css | CSSProperties | - | Custom CSS styles (Stiches format) |
block | boolean | - | Sets CSS display: block |
inline | boolean | - | Sets CSS display: inline |
inlineBlock | boolean | - | Sets CSS display: block-block |
direction | row/column | - | Sets CSS flex-direction to row or column |
align | string | - | CSS Align-Items |
gap | string | $8 | CSS Gap |
justify | string | - | CSS Justify-Content |
margin | string | - | CSS Margin |
padding | string | - | CSS Padding |
width | string | - | CSS Width |