Documentation Playground
Skip to content
Docs

Flex

Component for creating flex layouts. 
<.flex gap="3">
  <.box width="64px" height="64px"><.decoration_box height="64px" width="64px" /></.box>
  <.box width="64px" height="64px"><.decoration_box height="64px" width="64px" /></.box>
  <.box width="64px" height="64px"><.decoration_box height="64px" width="64px" /></.box>
  <.box width="64px" height="64px"><.decoration_box height="64px" width="64px" /></.box>
  <.box width="64px" height="64px"><.decoration_box height="64px" width="64px" /></.box>
</.flex>

API Reference

This component is based on the div element and supports common margin props.

Use these props to create flex layouts.

Prop Type Default Description
align string — Align items.
as string "div"
as_child boolean false Composes the component into its immediate child instead of rendering its own HTML element.
bottom string — CSS bottom property. Accepts scale values, CSS strings, responsive.
class string nil Additional CSS classes to add to the element.
direction string — Flex direction.
display string "flex"
flex_basis string — CSS flex-basis property. Responsive supported.
flex_grow string — CSS flex-grow property. Responsive supported.
flex_shrink string — CSS flex-shrink property. Responsive supported.
gap string — Gap utility class (0-9, -1 to -9)
gap_x string — Row gap utility class (0-9, -1 to -9)
gap_y string — Column gap utility class (0-9, -1 to -9)
grid_area string — CSS grid-area property. Responsive supported.
grid_column string — CSS grid-column property. Responsive supported.
grid_column_end string — CSS grid-column-end property. Responsive supported.
grid_column_start string — CSS grid-column-start property. Responsive supported.
grid_row string — CSS grid-row property. Responsive supported.
grid_row_end string — CSS grid-row-end property. Responsive supported.
grid_row_start string — CSS grid-row-start property. Responsive supported.
height any — Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
inset string — CSS inset property. Accepts scale values, CSS strings, responsive.
justify string — Justify content.
left string — CSS left property. Accepts scale values, CSS strings, responsive.
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
max_height any — Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
max_width any — Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
min_height any — Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
min_width any — Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
ml any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mr any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mt any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mx any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
my any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
overflow string — CSS overflow property. Responsive supported.
overflow_x string — CSS overflow-x property. Responsive supported.
overflow_y string — CSS overflow-y property. Responsive supported.
p any — Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
pb any — Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
pl any — Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
position string — CSS position property. Responsive supported.
pr any — Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
pt any — Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
px any — Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
py any — Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
right string — CSS right property. Accepts scale values, CSS strings, responsive.
style string ""
top string — CSS top property. Accepts scale values, CSS strings, responsive.
width any — Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
wrap string — Flex wrap.
align Align items.
Type string Default —
as
Type string Default "div"
as_child Composes the component into its immediate child instead of rendering its own HTML element.
Type boolean Default false
bottom CSS bottom property. Accepts scale values, CSS strings, responsive.
Type string Default —
class Additional CSS classes to add to the element.
Type string Default nil
direction Flex direction.
Type string Default —
display
Type string Default "flex"
flex_basis CSS flex-basis property. Responsive supported.
Type string Default —
flex_grow CSS flex-grow property. Responsive supported.
Type string Default —
flex_shrink CSS flex-shrink property. Responsive supported.
Type string Default —
gap Gap utility class (0-9, -1 to -9)
Type string Default —
gap_x Row gap utility class (0-9, -1 to -9)
Type string Default —
gap_y Column gap utility class (0-9, -1 to -9)
Type string Default —
grid_area CSS grid-area property. Responsive supported.
Type string Default —
grid_column CSS grid-column property. Responsive supported.
Type string Default —
grid_column_end CSS grid-column-end property. Responsive supported.
Type string Default —
grid_column_start CSS grid-column-start property. Responsive supported.
Type string Default —
grid_row CSS grid-row property. Responsive supported.
Type string Default —
grid_row_end CSS grid-row-end property. Responsive supported.
Type string Default —
grid_row_start CSS grid-row-start property. Responsive supported.
Type string Default —
height Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type any Default —
inset CSS inset property. Accepts scale values, CSS strings, responsive.
Type string Default —
justify Justify content.
Type string Default —
left CSS left property. Accepts scale values, CSS strings, responsive.
Type string Default —
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
max_height Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type any Default —
max_width Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type any Default —
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
min_height Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type any Default —
min_width Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
overflow CSS overflow property. Responsive supported.
Type string Default —
overflow_x CSS overflow-x property. Responsive supported.
Type string Default —
overflow_y CSS overflow-y property. Responsive supported.
Type string Default —
p Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
pb Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
pl Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
position CSS position property. Responsive supported.
Type string Default —
pr Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
pt Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
px Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
py Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
right CSS right property. Accepts scale values, CSS strings, responsive.
Type string Default —
style
Type string Default ""
top CSS top property. Accepts scale values, CSS strings, responsive.
Type string Default —
width Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type any Default —
wrap Flex wrap.
Type string Default —

Layout sizing, padding, position, overflow, and related props are shared with Box, Grid, Container, and Section.

← Box Grid →