Amplify UI

Flex

Flex provides a layout container using CSS Flexbox.

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

Demo

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

ClassDescription
amplify-flexTop level element that wraps the Flex primitive
  • --amplify-components-flex-align-content
  • --amplify-components-flex-align-items
  • --amplify-components-flex-flex-wrap
  • --amplify-components-flex-gap
  • --amplify-components-flex-justify-content

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.