Flex

The Flex primitive provides a Flexbox container with style display: flex. To learn how to use Flexbox CSS properties, see the following documentation:

• Flex layout - MDN
• A Complete Guide to Flex - CSS Tricks

Demo

<Flex
  direction="row"
  justifyContent="flex-start"
  alignItems="stretch"
  alignContent="flex-start"
  wrap="nowrap"
  gap="1rem"
>
  <View
    height="2rem"
    width="5rem"
    backgroundColor={tokens.colors.blue[20]}
  ></View>
  <View
    height="2.5rem"
    width="6.25rem"
    backgroundColor={tokens.colors.blue[40]}
  ></View>
  <View
    height="3rem"
    width="7.5rem"
    backgroundColor={tokens.colors.blue[60]}
  ></View>
  <View
    height="3.5rem"
    width="8.75rem"
    backgroundColor={tokens.colors.blue[80]}
  ></View>
</Flex>

Usage

Import the Flex primitive.

import { Flex, Button, useTheme } from '@aws-amplify/ui-react';

export const DefaultFlexExample = () => {
  const { tokens } = useTheme();

  return (
    <Flex>
      <Button backgroundColor={tokens.colors.pink[10]}>Button 1</Button>
      <Button backgroundColor={tokens.colors.pink[20]}>Button 2</Button>
      <Button backgroundColor={tokens.colors.pink[40]}>Button 3</Button>
    </Flex>
  );
};

Mapping Flexbox CSS properties to Flex props

Flexbox CSS property => Flex prop:

• flex-direction => direction
• justify-content => justifyContent
• align-items => alignItems
• align-content => alignContent
• flex-wrap => wrap
• gap => gap

Default prop values:

• direction="row"
• justifyContent="normal"
• alignItems="stretch"
• alignContent="normal"
• wrap="nowrap"
• gap="1rem"

CSS Styling

Target classes