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
alignItemsoptional
Description
Set how flex and grid items are positioned along the cross axis.
Type
string
Default
items-center
spaceXoptional
Description
Set the horizontal space between elements.
Type
string
Default
truncate
Description
Control the truncate behavior of the element.
Type
boolean
Default
false
Values
true, false
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0