Forma 36 version 3 is not supported anymoreClick here to go to version 4
Forma 36



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 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

e.g. GOOD

Code examples