# All files / src/Flex Flex.tsx

100% Statements 20/20
80% Branches 8/10
100% Functions 1/1
100% Lines 16/16

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    4320x
    20x

    20x

    366x
    365x
    365x
    365x
    365x
    365x
    365x
    365x
    365x
    365x
    365x

    365x

    20x
     import * as React from 'react'
    import { Box } from '../Box/Box'
    import { DivAttributes } from '../_utils/types'
    import { FlexProps } from './Flex.types'

    export const Flex = React.forwardRef<HTMLDivElement, DivAttributes & FlexProps>(
      function Flex(
        {
          alignItems = 'flex-start',
          basis,
          direction = 'row',
          gap,
          grow,
          flex,
          inline = false,
          justifyContent = 'flex-start',
          shrink,
          wrap,
          ...props
        },
        ref
      ) {
        return (
          <Box
            {...props}
            ref={ref}
            display={inline ? 'inline-flex' : 'flex'}
            alignItems={alignItems}
            justifyContent={justifyContent}
            flexBasis={basis}
            flexDirection={direction}
            flexGrow={grow}
            flexShrink={shrink}
            flexWrap={wrap}
            flex={flex}
            gap={gap}
          />
        )
      }
    )

    Flex.displayName = 'Flex'