Flexbox

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

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.

Pillar UI React Flexbox Component documentation