Flex
The Flex
component is a utility component designed to simplify working with flexbox layouts in your application. It provides an intuitive API to manage flex direction, alignment, justification, wrapping, and spacing using Tailwind CSS utility classes.
Playground
The Flex
component is a proxy for using Tailwind’s Flex Box utility classes
In this example effect can be observed when shrink is enabled
Component API
A utility component for creating flexible layouts with Flex Box
Prop | Default | Description |
column | — | boolean Determines if the flex direction is column instead of row. |
justify | 'start' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' Controls how flex items are aligned along the main axis. |
items | 'stretch' | 'start' | 'end' | 'center' | 'baseline' | 'stretch' Controls alignment of flex items along the cross axis. |
self | — | 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline' Controls individual alignment of a flex item. |
wrap | 'none' | 'none' | 'wrap' | 'reverse' Determines if flex items should wrap. |
content | — | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' Controls alignment of flex content along the cross axis. |
gap | — | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 Defines the space between flex items. |
grow | — | boolean Determines whether the flex item should grow to fill available space. |
shrink | true | boolean Determines whether the flex item should shrink if needed. |
className | — | string Additional class names for styling. |
title | — | string Adds a title attribute to the flex container. |
onClick | — | (event: React.MouseEvent Callback function fired when the flex container is clicked. |
children | — | React.ReactNode Content to be rendered inside the Flex container. |