Flex and FlexItem

Flex and FlexItem components are used to create a flexible layout system.

Import components

To use the Flex and FlexItem components, you need to import them from the @ef-global/backpack package:

import { Flex, FlexItem } from '@ef-global/backpack/Flex';

Here are some examples of how to use the Flex and FlexItem components:

<Flex direction="row" gap="m" align="center" justify="center">
  // Your content
</Flex>

<FlexItem flex="auto" align="center" justify="center">
  // Your content
</FlexItem>

Prop	Type	Accepted Values	Description
`children`	`ReactNode`	-	The content to be displayed inside the flex container.
`direction`	`FlexDirection`	'row', 'column'	The direction of the flex container.
`gap`	`FlexGapValues`	'', 'xxs', 'xs', 's', 'm', 'l', 'xl'	The gap between the flex items.
`align`	`FlexAlignValues`	'flex-start', 'center', 'flex-end', 'space-between', 'space-evenly'	The alignment of the flex items.
`justify`	`FlexJustifyValues`	'flex-start', 'center', 'flex-end', 'space-between', 'space-evenly'	The justification of the flex items.
`className`	`string`	-	Custom classname to apply additional CSS styles.
`style`	`CSSProperties`	-	Inline styles for the flex container.

Prop	Type	Accepted Values	Description
`children`	`ReactNode`	-	The content to be displayed inside the flex item.
`flex`	`FlexItemKeys`	'none', 'auto', 'grow', 'shrink'	The flex property for the flex item.
`align`	`FlexItemAlignKeys`	'start', 'center', 'end'	The alignment of the flex item.
`justify`	`FlexItemAlignKeys`	'start', 'center', 'end'	The justification of the flex item.
`width`	`string`	-	The width of the flex item (in percentages).
`className`	`string`	-	Custom classname to apply additional CSS styles.