Flex

A flexible layout container for creating responsive and adaptable layouts in React applications using flexbox.

Import

import { VKFlex, VKFlexItem } from "@vivakits/react-components";

Direction

The flex component supports 4 different flex-direction properties that can be set using the direction prop.

Wrap

Specify whether the flex items should wrap onto multiple lines or stay on a single line using the wrap prop.

Justify

Align flex items along the main axis using the justify prop.

Align

Align flex items along the cross axis using the align prop.

Gap

Set the spacing between flex items using the gap prop.

Basis

Set the initial size of a flex item using the basis prop, corresponding to the flex-basis CSS property.

Grow

Control the ability of a flex item to grow using the grow prop, corresponding to the flex-grow CSS property.

Shrink

Control the ability of a flex item to shrink using the shrink prop, corresponding to the flex-shrink CSS property.

Component

Specify a custom element type for the flex container using the component prop.

Available Variants

• direction: row, row-reverse, column, column-reverse
• justify: start, end, center, between, around, evenly
• align: start, end, center, baseline, stretch
• gap: sm, md, lg, xl, default, string, number
• wrap: wrap, nowrap

API Reference

Flex

FlexItem