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:

Flex

Type

Components

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
Hello
Hello
Hello
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 and items 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.