Flex

Used to flex elements together.

Box One

Box Two

import { Box, Flex } from '@fidely-ui/react'

export const FlexBasic = () => {
  return (
    <Flex>
      <Box bg={'green'} boxSize={'200px'} p={'10px'}>
        Box One
      </Box>
      <Box bg={'blue'} boxSize={'200px'} p={'10px'}>
        Box Two
      </Box>
    </Flex>
  )
}

Usage

import { Flex } from '@fidely-ui/react'

<Flex>Hey there</Flex>

Examples

Flex around

Box One

Box Two

import { Box, Flex } from '@fidely-ui/react'

export const FlexAround = () => {
  return (
    <Flex justify={'space-around'}>
      <Box bg={'green'} boxSize={'200px'} p={'10px'}>
        Box One
      </Box>
      <Box bg={'blue'} boxSize={'200px'} p={'10px'}>
        Box Two
      </Box>
    </Flex>
  )
}

Flex between

Box One

Box Two

import { Box, Flex } from '@fidely-ui/react'

export const FlexBetween = () => {
  return (
    <Flex justify={'space-between'}>
      <Box bg={'orange.9'} boxSize={'200px'} p={'10px'}>
        Box One
      </Box>
      <Box bg={'purple.alpha11'} boxSize={'200px'} p={'10px'}>
        Box Two
      </Box>
    </Flex>
  )
}

Inline flex

import { Box, Flex, Image } from '@fidely-ui/react'

export const FlexInlineFlex = () => {
  return (
    <Flex display={'inline-flex'} justify={'space-between'}>
      <Box>
        <Image
          boxSize="200px"
          fit="cover"
          src="https://i.pravatar.cc/250?img=10"
          alt="John Doe"
        />
      </Box>
      <Box>
        <Image
          boxSize="200px"
          fit="cover"
          src="https://i.pravatar.cc/250?img=12"
          alt="John Doe"
        />
      </Box>
      <Box>
        <Image
          boxSize="200px"
          fit="cover"
          src="https://i.pravatar.cc/250?img=10"
          alt="John Doe"
        />
      </Box>
    </Flex>
  )
}

Flex block

Box One

Box Two

import { Box, Flex } from '@fidely-ui/react'

export const FlexInlineBlock = () => {
  return (
    <Flex display={'inline-block'}>
      <Box bg={'green'} boxSize={'200px'} p={'10px'}>
        Box One
      </Box>
      <Box bg={'blue'} boxSize={'200px'} p={'10px'}>
        Box Two
      </Box>
    </Flex>
  )
}

The Flex component accepts the following properties:

direction: The flex direction of the container. Can be row, column, row-reverse or column-reverse.

wrap: Whether to wrap the flex items. The value is a boolean.

align: An alias for the css align-items property.

justify: An alias for the css justify-content property.

basis: An alias for the css flex-basis property.

grow: An alias for the css flex-grow property.

shrink: An alias for the css flex-shrink property.