:root { --body-vw: 18vw; --body-px: 18px; --text-l-vw: 20vw; --text-l-px: 20px; --text-m-vw: 16vw; --text-m-px: 16px; --text-s-vw: 14vw; --text-s-px: 14px; --xxl-vw: 64vw; --xxl-px: 64px; --xl-vw: 56vw; --xl-px: 56px; --l-vw: 42vw; --l-px: 42px; --m-vw: 36vw; --m-px: 36px; --s-vw: 24vw; --s-px: 24px; --xs-vw: 20vw; --xs-px: 20px; } @media only screen and (min-width: 1440px) { body { font-size: calc((var(--body-vw)) / 1440 * 100); } .text-l { font-size: calc((var(--text-l-vw)) / 1440 * 100); } .text-m { font-size: calc((var(--text-m-vw)) / 1440 * 100); } .text-s { font-size: calc((var(--text-s-vw)) / 1440 * 100); } h1, .headline.xxl { font-size: calc((var(--xxl-vw)) / 1440 * 100); } h2, .headline.xl { font-size: calc((var(--xl-vw)) / 1440 * 100); } h3, .headline.l { font-size: calc((var(--l-vw)) / 1440 * 100); } h4, .headline.m { font-size: calc((var(--m-vw)) / 1440 * 100); } h5, .headline.s { font-size: calc((var(--s-vw)) / 1440 * 100); } h6, .headline.xs { font-size: calc((var(--xs-vw)) / 1440 * 100); } } @media only screen and (min-width: 1920px) { body { font-size: calc((var(--body-px)) * 1.3333); } .text-l { font-size: calc((var(--text-l-px)) * 1.3333); } .text-m { font-size: calc((var(--text-m-px)) * 1.3333); } .text-s { font-size: calc((var(--text-s-px)) * 1.3333); } h1, .headline.xxl { font-size: calc((var(--xxl-px)) * 1.3333); } h2, .headline.xl { font-size: calc((var(--xl-px)) * 1.3333); } h3, .headline.l { font-size: calc((var(--l-px)) * 1.3333); } h4, .headline.m { font-size: calc((var(--m-px)) * 1.3333); } h5, .headline.s { font-size: calc((var(--s-px)) * 1.3333); } h6, .headline.xs { font-size: calc((var(--xs-px)) * 1.3333); } }

Flex

The flex suite is primarily used for arranging and positioning content.

Tip: The Flex classes will conflict with the display classes listed on the modifiers page, since Flex is a display type. To avoid this conflict, when using a class like Desktop Only, apply it to a div and nest your Flex div inside of it.

Tip: There are modifier classes for each viewport, but you must switch to tablet view to see tablet classes & mobile view to see mobile classes.

Flex
Vertical
First Row
Second Row
Flex
Vertical Reverse
First Row
Second Row
Flex
Horizontal
First Column
Second Column
Flex
Horizontal Reverse
First Column
Second Column
Flex
Center All
Flex
Align Center
Flex
Justify Center
Flex
Wrap
Flex
No Wrap
Flex
Align Top
Flex
Align Bottom
Flex
Justify Right
Flex
Justify Left
Flex
Justify Around
Flex
Justify Between
Tablet viewport icon.
More classes available at tablet viewport
Flex
Vertical Tab
First Row
Second Row
Flex
Vertical Reverse Tab
First Row
Second Row
Flex
Horizontal Tab
First Column
Second Column
Flex
Horizontal Reverse Tab
First Column
Second Column
Flex
Center All Tab
Flex
Align Center Tab
Flex
Justify Center Tab
Flex
Wrap Tab
Flex
No Wrap Tab
Flex
Align Top Tab
Flex
Align Bottom Tab
Flex
Justify Right Tab
Flex
Justify Left Tab
Flex
Justify Around Tab
Flex
Justify Between Tab
Mobile viewport icon.
More classes available at mobile viewport
Flex
Vertical Mob
First Row
Second Row
Flex
Vertical Reverse Mob
First Row
Second Row
Flex
Horizontal Mob
First Column
Second Column
Flex
Horizontal Reverse Mob
First Column
Second Column
Flex
Center All Mob
Flex
Align Center Mob
Flex
Justify Center Mob
Flex
Wrap Mob
Flex
No Wrap Mob
Flex
Align Top Mob
Flex
Align Bottom Mob
Flex
Justify Right Mob
Flex
Justify Left Mob
Flex
Justify Around Mob
Flex
Justify Between Mob