The Flex component is a low-level layout primitive for flexbox layouts.
Themed Flex component.
Summary
Functions
Renders a flex container.
Functions
Renders a flex container.
Examples
<.flex direction="row" gap="2"><div>Item 1</div><div>Item 2</div></.flex>
<.flex as="span" align="center" justify="space-between" wrap="wrap">...</.flex>Props
as- The element to render. Defaults to "div". Accepts: div, span, aside, main, nav, article, section, header, footer.display- CSS display property. Accepts: none, inline-flex, flex. Responsive supported.direction- Flex direction. Accepts: row, column, row-reverse, column-reverse. Responsive supported.align- Align items. Accepts: start, center, end, baseline, stretch. Responsive supported.justify- Justify content. Accepts: start, center, end, between. Responsive supported.wrap- Flex wrap. Accepts: nowrap, wrap, wrap-reverse. Responsive supported.gap,gap_x,gap_y- Gap utilities for flex/grid layouts. Responsive supported.p,pt,pr,pb,pl,px,py- Padding utilities (theme scale). Responsive supported.m,mt,mr,mb,ml,mx,my- Margin utilities (theme scale). Responsive supported.width,min_width,max_width- Width utilities. Responsive supported.height,min_height,max_height- Height utilities. Responsive supported.flex_basis,flex_shrink,flex_grow- Flexbox layout utilities. Responsive supported.class- Additional CSS classes to add to the element.style- Additional inline styles.rest- Additional HTML attributes.as_child- Composes the component into its immediate child instead of rendering its own HTML element.inner_block- Slot for flex children.
Attributes
p(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.px(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.py(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.pt(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.pr(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.pb(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.pl(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.width(:any) - Width utility class string or map.100pxor%{xs: '100px', sm: '200px'}.max_width(:any) - Max width utility class string or map.100pxor%{xs: '100px', sm: '200px'}.min_width(:any) - Min width utility class string or map.100pxor%{xs: '100px', sm: '200px'}.height(:any) - Height utility class string or map.100pxor%{xs: '100px', sm: '200px'}.max_height(:any) - Max height utility class string or map.100pxor%{xs: '100px', sm: '200px'}.min_height(:any) - Min height utility class string or map.100pxor%{xs: '100px', sm: '200px'}.position(:string) - CSS position property. Responsive supported. Must be one of"static","relative","absolute","fixed", or"sticky".inset(:string) - CSS inset property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".top(:string) - CSS top property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".right(:string) - CSS right property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".bottom(:string) - CSS bottom property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".left(:string) - CSS left property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".overflow(:string) - CSS overflow property. Responsive supported. Must be one of"visible","hidden","clip","scroll", or"auto".overflow_x(:string) - CSS overflow-x property. Responsive supported. Must be one of"visible","hidden","clip","scroll", or"auto".overflow_y(:string) - CSS overflow-y property. Responsive supported. Must be one of"visible","hidden","clip","scroll", or"auto".flex_basis(:string) - CSS flex-basis property. Responsive supported.flex_shrink(:string) - CSS flex-shrink property. Responsive supported. Must be one of"0", or"1".flex_grow(:string) - CSS flex-grow property. Responsive supported. Must be one of"0", or"1".grid_area(:string) - CSS grid-area property. Responsive supported.grid_column(:string) - CSS grid-column property. Responsive supported.grid_column_start(:string) - CSS grid-column-start property. Responsive supported.grid_column_end(:string) - CSS grid-column-end property. Responsive supported.grid_row(:string) - CSS grid-row property. Responsive supported.grid_row_start(:string) - CSS grid-row-start property. Responsive supported.grid_row_end(:string) - CSS grid-row-end property. Responsive supported.m(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mx(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.my(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mt(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mr(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mb(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.ml(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.as_child(:boolean) - Composes the component into its immediate child instead of rendering its own HTML element. Defaults tofalse.gap(:string) - Gap utility class (0-9, -1 to -9). Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".gap_y(:string) - Column gap utility class (0-9, -1 to -9). Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".gap_x(:string) - Row gap utility class (0-9, -1 to -9). Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".as(:string) - Defaults to"div". Must be one of"div","span","aside","main","nav","article","section","header", or"footer".class(:string) - Additional CSS classes to add to the element. Defaults tonil.display(:string) - Defaults to"flex". Must be one of"none","inline-flex", or"flex".direction(:string) - Flex direction. Must be one of"row","column","row-reverse", or"column-reverse".align(:string) - Align items. Must be one of"start","center","end","baseline", or"stretch".justify(:string) - Justify content. Must be one of"start","center","end", or"space-between".wrap(:string) - Flex wrap. Must be one of"nowrap","wrap", or"wrap-reverse".style(:string) - Defaults to"".- Global attributes are accepted.
Slots
inner_block(required)