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