Flex Component
The Flex component provides a flexible and powerful way to manage layouts in your React applications. With a rich set of variants and customization options, it allows you to easily control the direction, alignment, and spacing of child elements.
Installation
Ensure that have the @zyxui library installed in your project:
If you haven't install and setup @zyxui before please follow the installation guide
Basic Usage
Import the Flex component and use it to create flexible layouts:
Customization
Tailor the behavior of the Flex component to suit your layout needs with the following customization options.
Direction
The direction prop allows you to control the direction of flex container. This porp can have many values: column | column-reverse | row | row-reverse, and the default value is: row.
Justify
The justify prop, allows you to align items along the main axis. You can check all about this prop values in API Reference Section
justify: flex-start
justify: center
justify: flex-end
justify: space-between
justify: space-around
justify: space-evenly
justify: stretch
justify: normal
Align
The align prop, allows you to align items along the corss axis. You can check all about this prop values in API Reference Section
Align Start Example
Align Stretch Example
Align End Example
Align Center Example
Align Baseline Example
Wrap
With wrap prop, you are able to control wether the flex container should wrap it's children or not. Values that should be provided to this prop: wrap | wrap-reverse | nowrap, and the default value is 'nowrap'.
wrap: nowrap
Directions:
wrap: wrap
Directions:
wrap: wrap-reverse
Directions:
Gap
The gap prop, allows you to adjust the gap between child elements. Accepted values for this prop are: sm | md | lg | xl | undefined/null
Gap Sizes:
API Reference
The Flex component exposes a range of customization options to tailor the behavior of your layout. Here's an overview of the available props:
| Property | Description | Type | Default |
|---|---|---|---|
| direction | Control the direction of the flex container. | reference flex-direction | row |
| justify | Align items along the main axis. | reference justify-content | flex-start |
| align | Align items along the cross axis. | reference align-items | stretch |
| wrap | Control whether the flex container should wrap its children. | reference flex-wrap | nowrap |
| gap | Adjust the gap between child elements. | sm | md | lg | xl | none | none |
| className | Adding custom class names to your text element. | string | undefined |