WUI logo

Flex

The Flex component is a layout element that arranges its child components in a flexible and responsive manner using CSS Flexbox. It simplifies the creation of complex, adaptive layouts by controlling the alignment, distribution, and spacing of items within a container. This component is fundamental for building responsive and cohesive designs that adapt seamlessly to different screen sizes and orientations.

Source@welcome-ui/flex
OverviewProps
import * as React from 'react'
import { Flex } from '@welcome-ui/flex'
import { Box } from '@welcome-ui/box'


const Example = () => {
  return (
    <Flex align="center" justify={{ xs: 'center', md: 'space-between' }} wrap="wrap">
      <Box backgroundColor="sub-1" h={50} m="sm" w={50} />
      <Box backgroundColor="sub-2" h={50} m="sm" w={50} />
      <Box backgroundColor="sub-3" h={50} m="sm" w={50} />
      <Box backgroundColor="sub-4" h={50} m="sm" w={50} />
      <Box backgroundColor="sub-5" h={50} m="sm" w={50} />
    </Flex>
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/flex
2

Import component:

import { Flex } from '@welcome-ui/flex'

Examples

With the Flex component use shorthand props:

  • alignItems is align
  • flexBasis is basis
  • flexDirection is direction
  • flexGrow is grow
  • flexShrink is shrink
  • flexWrap is wrap
  • justifyContent is justify
BoxGrid