Flexbox

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 { Flexbox } from '@pillar-ui/core'
Go To flex Source CodeIssuesdiscussions

Usage

import { Flex } from '@pillar-ui/core'
<Flex />

Examples

Gap

Default

-

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
import { Flex, Paper } from '@pillar-ui/core'

const Box = (props: any) => {
  return <Paper width="48p" ratio="1" background="B6" corner="2" className="F-c" {...props} />
}

const boxes = Array.from({ length: 5 }, (_, index) => <Box key={index} />)

export const FlexGap = () => {
  return (
    <Paper flow="6">
      <Flex>{boxes}</Flex>
      <Flex gap="1">{boxes}</Flex>
      <Flex gap="2">{boxes}</Flex>
      <Flex gap="3">{boxes}</Flex>
      <Flex gap="4">{boxes}</Flex>
      <Flex gap="5">{boxes}</Flex>
      <Flex gap="6">{boxes}</Flex>
      <Flex gap="7">{boxes}</Flex>
      <Flex gap="8">{boxes}</Flex>
      <Flex gap="9">{boxes}</Flex>
    </Paper>
  )
}

Wrap

Default

false

Type

boolean
import { Flex, Paper } from '@pillar-ui/core'

const Box = (props: any) => {
  return <Paper width="48p" ratio="1" background="B6" corner="2" className="F-c" {...props} />
}

const boxes = Array.from({ length: 25 }, (_, index) => <Box key={index} />)

export const FlexWrap = () => {
  return (
    <>
      <Flex wrap gap="4">
        {boxes}
      </Flex>
    </>
  )
}

Direction

Default

row

Type

'row' | 'column'
import { Flex, Paper } from '@pillar-ui/core'

const Box = (props: any) => {
  return <Paper width="48p" ratio="1" background="W8" corner="2" className="F-c" {...props} />
}

const boxes = Array.from({ length: 5 }, (_, index) => <Box key={index} />)

export const FlexDirection = () => {
  return (
    <Paper flow="8">
      <Flex className="ex-striped" gap="4">
        {boxes}
      </Flex>
      <Flex className="ex-striped" gap="4" direction="col">
        {boxes}
      </Flex>
    </Paper>
  )
}

Justify

Default

start

Type

'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'

Start

Center

End

Between

Between

Around

Around

Evenly

Evenly

import { Flex, Paper, Text } from '@pillar-ui/core'

const Box = ({ children, ...rest }: any) => {
  return (
    <Paper border p="4" background="W9" corner="2" className="F-c" {...rest}>
      <Text weight="6">{children}</Text>
    </Paper>
  )
}

export const FlexJustify = () => {
  return (
    <>
      <Flex className="ex-striped" gap="4">
        <Box>Start</Box>
      </Flex>
      <Flex className="ex-striped" gap="4" justify="center">
        <Box>Center</Box>
      </Flex>
      <Flex className="ex-striped" gap="4" justify="end">
        <Box>End</Box>
      </Flex>
      <Flex className="ex-striped" gap="4" justify="between">
        <Box>Between</Box>
        <Box>Between</Box>
      </Flex>
      <Flex className="ex-striped" gap="4" justify="around">
        <Box>Around</Box>
        <Box>Around</Box>
      </Flex>
      <Flex className="ex-striped" gap="4" justify="evenly">
        <Box>Evenly</Box>
        <Box>Evenly</Box>
      </Flex>
    </>
  )
}

Items

Default

streach

Type

'start' | 'end' | 'center' | 'streach'
import { Flex, Paper } from '@pillar-ui/core'

const Box = (props: any) => {
  return <Paper width="48p" ratio="1" background="W11" corner="2" className="F-c" {...props} />
}

export const FlexItems = () => {
  return (
    <>
      <Flex gap="4" as={Paper} height="192p" p="3" background="W6">
        <Box />
        <Box />
        <Box />
      </Flex>
      <Flex gap="4" items="center" as={Paper} p="3" height="192p" background="W6">
        <Box />
        <Box />
        <Box />
      </Flex>
      <Flex gap="4" items="end" as={Paper} p="3" height="192p" background="W6">
        <Box />
        <Box />
        <Box />
      </Flex>

      <Flex gap="4" items="start" as={Paper} p="3" height="192p" background="W6">
        <Box />
        <Box />
        <Box />
      </Flex>
    </>
  )
}

Inline

import { Flex, Paper } from '@pillar-ui/core'

const Box = (props: any) => {
  return <Paper width="48p" ratio="1" background="B6" corner="2" className="F-c" {...props} />
}

export const FlexInline = () => {
  return (
    <Paper width="100" flow="8">
      <Flex inline gap="3">
        <Box />
        <Box />
      </Flex>
      <Flex inline gap="3">
        <Box background="B9" />
        <Box background="B9" />
      </Flex>
    </Paper>
  )
}

previous

Code

next

Grid