Layout
Flex
Creates a flex container which enables flex context for all its direct children.
Two Cards wrapped in a flex container
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Import Flex
Tremor exports one component for Flex.
import { Flex } from "@tremor/react";
Anatomy
How the basic component is pieced together displaying all properties with their default values.
import { Flex } from "@tremor/react"; export default () => ( <Flex justifyContent="justify-between" alignItems="items-center" spaceX="space-x-0" truncate={false} marginTop="mt-0" > </Flex> );
Usage example
The example below shows a KPI card in employing Flex to display two metrics components next to each other.
Tickets sold
9,876
Average Selling Price
$ 175.20
import { Flex, Metric, Card, Text } from "@tremor/react"; export default () => ( <Card maxWidth="max-w-xs"> <Flex> <div> <Text>Tickets sold</Text> <Metric>9,876</Metric> </div> <div> <Text>Average Selling Price</Text> <Metric>$ 175.20</Metric> </div> </Flex> </Card> );
API Reference: Flex
- justifyContentoptional
- Description
- Set how flex and grid items are positioned along the main axis.
- Type
- string
- Default
- justify-between
- Values
tailwind-class
- alignItemsoptional
- Description
- Set how flex and grid items are positioned along the cross axis.
- Type
- string
- Default
- items-center
- Values
tailwind-class
- spaceXoptional
- truncate
- Description
- Control the truncate behavior of the element.
- Type
- boolean
- Default
- false
- Values
- true, false
- marginTopoptional