New release
Introducing a visual refresh to Forma 36 React componentsRelease notes
Forma 36

Flex

StorybookGithub
alpha

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

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

Element

e.g. GOOD

Element

Code examples

Example item
Example item
Example item

User name