Pillar UI React Flexbox Component documentation
Create flexible and responsive layouts with a customizable Flexbox component for React. Easily arrange and align elements within your applications for optimal user experience.
Components:
Type
import
import { Pillar UI React Flexbox Component } from '@pillar-ui/core'
Usage
Gap
This property provides you with the ability to manage and adjust the amount of space between the individual child elements within a Flex container. It allows you to fine-tune the spacing, ensuring optimal alignment and visual harmony between the flex items.
- Type: string
- Options:
2xs
|xs
|sm
|md
|lg
|xl
|2xl
const Box = (props: any) => {
return (
<Paper
as={Flex}
justify="center"
items="center"
style={{ width: '30px', height: '30px' }}
background="bg-6"
corner="sm"
{...props}
/>
)
}
const boxes = Array.from({ length: 5 }, (_, index) => <Box style={{ width: '100px', height: '100px' }} key={index} />)
export const FlexGap = () => {
return (
<div className="l_f-sm">
<Flex gap="2xs">{boxes}</Flex>
<Flex gap="xs">{boxes}</Flex>
<Flex gap="sm">{boxes}</Flex>
<Flex gap="md">{boxes}</Flex>
<Flex gap="lg">{boxes}</Flex>
<Flex gap="xl">{boxes}</Flex>
<Flex gap="2xl">{boxes}</Flex>
</div>
)
}
Wrap
This option lets you decide if items inside a container should wrap to the next line when there's insufficient horizontal space to show them in a single row. This maintains content organization and readability, crucial for smaller screens or varying device sizes.
- Type: boolean
- Default: false
const Box = (props: any) => {
return (
<Paper
as={Flex}
justify="center"
items="center"
style={{ width: '30px', height: '30px' }}
background="bg-6"
corner="sm"
{...props}
/>
)
}
const boxes = Array.from({ length: 5 }, (_, index) => <Box style={{ width: '100px', height: '100px' }} key={index} />)
export const FlexWrap = () => {
return (
<Paper className="playground" flow="sm" borderColor="opa-6" ="sm" background="bg-3" corner="sm">
<Flex wrap gap="sm">
{boxes}
{boxes}
{boxes}
{boxes}
{boxes}
{boxes}
</Flex>
</Paper>
)
}
Direction
This attribute defines the orientation in which the flexible items within a Flex container are laid out. It determines whether these items are arranged horizontally or vertically, influencing the overall flow and structure of the container's content.
- Type: string
- Options:
column
|row
- Default:
row
const Box = (props: any) => {
return (
<Paper
as={Flex}
justify="center"
items="center"
style={{ width: '30px', height: '30px' }}
background="bg-6"
corner="sm"
{...props}
/>
)
}
const boxes = Array.from({ length: 5 }, (_, index) => <Box style={{ width: '100px', height: '100px' }} key={index} />)
export const FlexDirection = () => {
return (
<div className="l_f-sm">
<Flex gap="sm">{boxes}</Flex>
<Flex gap="sm" direction="column">
{boxes}
</Flex>
</div>
)
}
Justify
This property governs the positioning of child elements within a container along the horizontal axis. It enables you to control how the child items are aligned in relation to each other, influencing their placement in terms of left-to-right or right-to-left arrangement.
- Type: string
- Options:
start
|center
|end
|between
|around
|evenly
- Default:
start
const Box = (props: any) => {
return (
<Paper
as={Flex}
justify="center"
items="center"
style={{ width: '30px', height: '30px' }}
background="bg-6"
corner="sm"
{...props}
/>
)
}
const boxes = Array.from({ length: 5 }, (_, index) => <Box style={{ width: '100px', height: '100px' }} key={index} />)
export const FlexJustify = () => {
return (
<div className="l_f-lg">
<Flex gap="sm">{boxes}</Flex>
<Flex gap="sm" justify="center">
{boxes}
</Flex>
<Flex gap="sm" justify="end">
{boxes}
</Flex>
<Flex gap="sm" justify="between">
{boxes}
</Flex>
<Flex gap="sm" justify="around">
{boxes}
</Flex>
<Flex gap="sm" justify="evenly">
{boxes}
</Flex>
</div>
)
}
Items
This property allows you to determine the positioning of child elements along the vertical axis within a container. It provides control over how the child items are aligned with respect to each other, influencing their arrangement from top to bottom or bottom to top.
- Type: string
- Options:
start
|center
|end
- Default:
start
const Box = (props: any) => {
return (
<Paper
as={Flex}
justify="center"
items="center"
style={{ width: '30px', height: '30px' }}
background="bg-6"
corner="sm"
{...props}
/>
)
}
const boxes = Array.from({ length: 5 }, (_, index) => <Box style={{ width: '100px', height: '100px' }} key={index} />)
export const FlexItems = () => {
return (
<div className="l_f-sm">
<Flex as={Paper} height="100px" background="bg-5" gap="sm" items="center">
Hello
</Flex>
<Flex as={Paper} height="100px" background="bg-5" gap="sm" items="end">
Hello
</Flex>
<Flex as={Paper} height="100px" background="bg-5" gap="sm">
Hello
</Flex>
</div>
)
}
Best Practices
- Use the
gap
property to maintain consistent spacing between child elements without adding additional styles. - Employ the
wrap
property to ensure your layout remains responsive and adaptable to various screen sizes. - Utilize the
direction
property to manage the orientation of child elements, aiding in creating intuitive and well-structured layouts. - Leverage the
justify
anditems
properties to easily align content, enhancing the visual appeal and readability of your layouts.
Conclusion
The Flex component is a versatile tool designed to simplify the creation of well-aligned and responsive layouts. Its wide array of properties allows for detailed customization, ensuring your content is displayed in a polished and organized manner.