Layout

Flex

Creates a flex container which enables flex context for all its direct children.

   

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.

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