Flex
Utilities controlling the flex items
Style structure
Vertical Flex
Class
Element
ks-flex-v
Change parent
ks-flex-v-xy-center
Change parent
ks-flex-v-x-left-y-center
Change parent
ks-flex-v-x-stretch-y-center
Change parent
Horizontal Flex
Class
Element
ks-flex-h-left-top
Change parent
ks-flex-h-left-center
Change parent
ks-flex-h-space-between
Change parent
ks-flex-h-space-around
Change parent
Secondary classes
In some cases we have to use horizontal flex for desktop and vertical flex for mobile. Secondary classes will work together with all the primary flex classes.
Secondary Class
Element
--wrap-down
Change parent
--on-mobile-v-left-top
Change parent
Usage Examples
Vertical Flex
ks-flex-v
01
02 - No width
03
Centered Vertical Flex
ks-flex-v-xy-center
01
02
03
Vertical Flex Center Left
ks-flex-v-x-left-y-center
01
02
03
Vertical Flex Strech and Center
ks-flex-v-x-stretch-y-center
01
02 - no width
03 - 150px width
Class
Layout
Style panel
ks-flex-h-left-top
01
02
03
ks-flex-h-left-center
01
02
03
ks-flex-h-space-between
01
02
03
ks-flex-h-space-around
01
02
03
