@neo4j-ndl/react/skills/ndl-react/components/flex.md

React implementation of Neo4j Design System

# Flex

Import: `import { Flex } from '@neo4j-ndl/react'`

## Props

### Flex

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `alignItems` | `AlignItems` |  | `undefined` | @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items |
| `as` | `'div' \| 'li' \| 'ol' \| 'span' \| 'ul'` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `borderRadius` | `'2xl' \| '3xl' \| 'full' \| 'lg' \| 'md' \| 'none' \| 'sm' \| 'xl'` |  | `undefined` |  |
| `children` | `ReactNode` |  |  |  |
| `columnGap` | `'12' \| '16' \| '2' \| '20' \| '24' \| '32' \| '4' \| '48' \| '6' \| '64' \| '8'` |  | `undefined` |  |
| `flexDirection` | `'-moz-initial' \| 'column' \| 'inherit' \| 'initial' \| 'revert-layer' \| 'revert' \| 'row' \| 'unset'` |  | `column` | Flex direction is set to column by default. The `row-reverse` and `column-reverse` values are skipped due to accessibility concerns. @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#accessibility_concerns |
| `flexWrap` | `'-moz-initial' \| 'inherit' \| 'initial' \| 'nowrap' \| 'revert-layer' \| 'revert' \| 'unset' \| 'wrap-reverse' \| 'wrap'` |  | `nowrap` | @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap |
| `gap` | `'12' \| '16' \| '2' \| '20' \| '24' \| '32' \| '4' \| '48' \| '6' \| '64' \| '8'` |  | `8` |  |
| `justifyContent` | `JustifyContent` |  | `undefined` | @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content |
| `ref` | `((instance: HTMLDivElement \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<HTMLDivElement \| null> \| ... 9 more ...` |  |  | A ref to apply to the root element. |
| `rowGap` | `'12' \| '16' \| '2' \| '20' \| '24' \| '32' \| '4' \| '48' \| '6' \| '64' \| '8'` |  | `undefined` |  |

## Examples

### Default

```tsx
import { tokens } from '@neo4j-ndl/base';
import { Box, Flex } from '@neo4j-ndl/react';

const Tiles = `
  linear-gradient(
    45deg,
    var(--theme-color-neutral-bg-strong) 25%,
    transparent 25%
  ),
  linear-gradient(
    135deg,
    var(--theme-color-neutral-bg-strong) 25%,
    transparent 25%
  ),
  linear-gradient(
    45deg,
    transparent 75%,
    var(--theme-color-neutral-bg-strong) 75%
  ),
  linear-gradient(
    135deg,
    transparent 75%,
    var(--theme-color-neutral-bg-strong) 75%
  )
`;

const TiledTransparentBackground: React.CSSProperties = {
  backgroundColor: 'white',
  backgroundImage: Tiles,
  backgroundPosition: '0px 0px, 10px 0px, 10px -10px, 0px 10px',
  backgroundSize: '20px 20px',
  border: '1px solid var(--theme-color-neutral-border-weak)',
};

const component = () => (
  <Flex
    style={{
      ...TiledTransparentBackground,
      borderRadius: tokens.borderRadius['xl'],
      padding: tokens.space['12'],
    }}
  >
    {Array.from({ length: 3 }).map((_, i) => (
      <Box
        key={`box-${i}`}
        borderRadius="xl"
        style={{ height: '80px', minWidth: '240px' }}
        className="n-bg-primary-bg-weak n-border n-border-primary-border-strong"
      ></Box>
    ))}
  </Flex>
);

export default component;
```