Flex

A component based on Flexbox for creating layouts.

Usage

import { RFlex, RFlexItem } from "@rebilly/revel";

<r-flex>
    <r-flex-item>...</r-flex-item>
    <r-flex-item>...</r-flex-item>
</r-flex>

Examples

Basic flex

By default, the flex layout expands for 12 columns and will wrap to the next row once the combined cells reach 12 spaces (spans) in total. By default flex items will use the width of their content.

Use span="fill" to make the item expand to fill the remaining space.
Use flex-none to make the item not grow or shrink.

flex.vue

Keep RFlex columns and RFlexItem span equal or lower than 12.

Nested flex

It is possible to nest flex layouts inside each other.

flex-nested.vue

Wrap

Add the wrap property to a RFlexItem to make the next item continue on the next flex row.

flex-wrap.vue

Offset

Add the offset property to a RFlexItem to move the item to the right.

Use auto to make the item span the remaining space.

flex-offset.vue

Avoid using RFlexItem wrap and RFLexItem offset props together.

Responsivess

Flex items will take full width on breakpoint --r-breakpoints-m.

Name	Type	Default	Description
columns	FlexSize	'12'	Number of flex columns (1 to 12)
gap	Gap	'6'	Gap between flex columns (0 to 12), or two values separated by a comma for different row and column gaps.
alignItems	Nullable, Distribution	null	Align items in the flex container
alignContent	Nullable, ContentDistribution	null	Align content in the flex container
justifyContent	Nullable, ContentDistribution	null	Justify content in the flex container
direction	Nullable, Direction	null	Adjust flex items direction
wrap	Nullable, Wrap	null	Adjust flex items wrapping
unstackable	boolean	false	Prevents flex container to stack on smaller screens

Name	Description
default	Flex items

Name	Type	Default	Description
span	union, FlexSize, "fill", "auto"	'auto'	Number of flex columns (1 to 12)
wrap	Nullable, boolean	null	Move to the next row
offset	Nullable, union	null	Move the item to the right."
alignSelf	Nullable, Distribution	null	Align items in the flex container
flexNone	boolean	false	Remove flex properties

Name	Description
default