Flex

Flex is a great tool when you wan't to line things up in one direction. For example boxes in the limited amout of space, that would wrap or not wrap. When it comes to Flex, browser calculate things only in one direction, each row at the time. When for example CSS Grid calculates always rows and columns at the same time. If you think CSS Grid component is what you are looking for go ahead and have a look on our Grid component

Table of contents

• How to use Flex
• Code examples

How to use Flex

Margins

Margins and padding for Flex component are based on our spacing system. Here is an overview of spacings that are availeble:

spacing2Xs | spacingXs | spacingXs | spacingS | spacingM | spacingL | spacingXl | spacing2Xl | spacing3Xl | spacing4Xl

Flex, as any other element, can get margin value, which will be added evenly to all of it's sides or more specific instructions like margin-top or margin-right. those 2 can not be added at the same time - they will overwrite itself. That's why, please remember to not use them together:

e.g. WRONG

// import { Flex } from '@contenful/forma-36-react-components';

<Flex marginTop="spacingXs" margin="spacingXs">
  Element
</Flex>
// import { Flex } from '@contenful/forma-36-react-components';

<Flex marginTop="spacingXs" margin="spacingXs">
  Element
</Flex>
Hide source

e.g. GOOD

// import { Flex } from '@contenful/forma-36-react-components';

<Flex marginTop="spacingXs" marginLeft="spacingXs">
  Element
</Flex>
// import { Flex } from '@contenful/forma-36-react-components';

<Flex marginTop="spacingXs" marginLeft="spacingXs">
  Element
</Flex>
Hide source

Code examples

// import { Flex } from '@contenful/forma-36-react-components';

<Flex
  justifyContent="space-between"
  alignItems="center"
  marginBottom="spacingM"
>
  <Flex>Example item</Flex>
  <Flex>Example item</Flex>
  <Flex>Example item</Flex>
</Flex>
// import { Flex } from '@contenful/forma-36-react-components';

<Flex
  justifyContent="space-between"
  alignItems="center"
  marginBottom="spacingM"
>
  <Flex>Example item</Flex>
  <Flex>Example item</Flex>
  <Flex>Example item</Flex>
</Flex>
Hide source

// import { Flex, Button, TextLink, Paragraph } from '@contenful/forma-36-react-components';

<Flex
  justifyContent="space-between"
  alignItems="center"
  marginBottom="spacingM"
>
  <Flex>
    <Paragraph>User name</Paragraph>
  </Flex>
  <Flex>
    <Flex marginRight="spacingM">
      <TextLink href="http://google.com">User profile</TextLink>
    </Flex>
    <Flex>
      <Button>Add user to the team</Button>
    </Flex>
  </Flex>
</Flex>
// import { Flex, Button, TextLink, Paragraph } from '@contenful/forma-36-react-components';

<Flex
  justifyContent="space-between"
  alignItems="center"
  marginBottom="spacingM"
>
  <Flex>
    <Paragraph>User name</Paragraph>
  </Flex>
  <Flex>
    <Flex marginRight="spacingM">
      <TextLink href="http://google.com">User profile</TextLink>
    </Flex>
    <Flex>
      <Button>Add user to the team</Button>
    </Flex>
  </Flex>
</Flex>
Hide source