Flexbox
A set of flexbox utilities to quickly manage layout and alignment for components. Either use these tools as responsive classes in HTML or import mixins as part of your own scss.
Enable flexbox context
Use the class kx-flex on a container to set a flexbox context. Direct children will then be transformed into flex items.
<div class="kx-flex">
A flexbox container
</div>
Responsive variations available for kx-flex
kx-flex[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-flex@mob-s
<div class="kx-inline-flex">
An inline flexbox container
</div>
Responsive variations available for kx-inline-flex
kx-inline-flex[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-inline-flex@mob-s
Direction
You can set the direction of flex items by adding directional classes on the container. Since the browser default direction is set to row, you can most often omit the horizontal class kx-flex-row. But in responsive contexts, you may need to set directional classes explicitly.
kx-flex-row
Use kx-flex-row to set a horizontal direction (browser default).
<div class="kx-flex kx-flex-row">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
Responsive variations available for kx-flex-row
kx-flex-row[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-flex-row@mob-s
kx-flex-row-reverse
Use kx-flex-row-reverse to invert the horizontal direction of flex items.
<div class="kx-flex kx-flex-row-reverse">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
Responsive variations available for kx-flex-row-reverse
kx-flex-row-reverse[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-flex-row-reverse@mob-s
kx-flex-column
Use kx-flex-column to set a vertical direction.
<div class="kx-flex kx-flex-column">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
Responsive variations available for kx-flex-column
kx-flex-column[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-flex-column@mob-s
kx-flex-column-reverse
Use kx-flex-column-reverse to invert the vertical direction of flex items.
<div class="kx-flex kx-flex-column-reverse">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
Responsive variations available for kx-flex-column-reverse
kx-flex-column-reverse[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-flex-column-reverse@mob-s
Justify content
We provide justify-content utilities to be used on flex containers. This way you can change alignment of flex items on the main axis.
- If
flex-direction: row(default), the main axis = x-axis. - If
flex-direction: column, the main axis = y-axis.
Choose between start (default), center, end, between or around.
<div class="kx-flex kx-justify-content-start">...</div>
<div class="kx-flex kx-justify-content-center">...</div>
<div class="kx-flex kx-justify-content-end">...</div>
<div class="kx-flex kx-justify-content-between">...</div>
<div class="kx-flex kx-justify-content-around">...</div>
Responsive variations available for kx-justify-content-start
kx-justify-content-start[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-justify-content-start@mob-s
Responsive variations available for kx-justify-content-start
kx-justify-content-start[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-justify-content-start@mob-s
Responsive variations available for kx-justify-content-end
kx-justify-content-end[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-justify-content-end@mob-s
Responsive variations available for kx-justify-content-between
kx-justify-content-between[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-justify-content-between@mob-s
Responsive variations available for kx-justify-content-around
kx-justify-content-around[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-justify-content-around@mob-s
Align items
We provide align-items utilities to be used on flex containers. This way you can change alignment of flex items on the cross axis.
- If
flex-direction: row(default), the cross axis = y-axis. - If
flex-direction: column, the cross axis = x-axis.
Choose between start, center, end, baseline or stretch (default).
<div class="kx-flex kx-align-items-start">...</div>
<div class="kx-flex kx-align-items-center">...</div>
<div class="kx-flex kx-align-items-end">...</div>
<div class="kx-flex kx-align-items-baseline">...</div>
<div class="kx-flex kx-align-items-stretch">...</div>
Responsive variations available for kx-align-items-start
kx-align-items-start[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-align-items-start@mob-s
Responsive variations available for align-items-center
align-items-center[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
align-items-center@mob-s
Responsive variations available for align-items-end
align-items-end[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
align-items-end@mob-s
Responsive variations available for kx-align-items-between
kx-align-items-between[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-align-items-between@mob-s
Responsive variations available for kx-align-items-around
kx-align-items-around[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-align-items-around@mob-s
Align self
We provide align-self utilities to be used on flex items. This way you can change alignment of flex items on the cross axis.
- If
flex-direction: row(default), the cross axis = y-axis. - If
flex-direction: column, the cross axis = x-axis.
Choose between start, center, end, baseline or stretch (default).
<div class="kx-align-self-start">Aligned flex item</div>
<div class="kx-align-self-center">Aligned flex item</div>
<div class="kx-align-self-end">Aligned flex item</div>
<div class="kx-align-self-baseline">Aligned flex item</div>
<div class="kx-align-self-stretch">Aligned flex item</div>
Responsive variations available for kx-align-self-start
kx-align-self-start[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-align-self-start@mob-s
Responsive variations available for kx-align-self-center
kx-align-self-center[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-align-self-center@mob-s
Responsive variations available for kx-align-self-end
kx-align-self-end[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-align-self-end@mob-s
Responsive variations available for kx-align-self-baseline
kx-align-self-baseline[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-align-self-baseline@mob-s
Responsive variations available for kx-align-self-stretch
kx-align-self-stretch[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-align-self-stretch@mob-s
Auto margins
By combining flex alignment with auto margins, you can get granular layout control over your flex items. Please see spacing for more details on auto margins. The icons ⏪ and ⏩ indicate the direction of the auto margins.
Note: IE10 and IE11 does not support auto margins on flex items if the parent flex container has a non-default justify-content value. See answer on StackOverflow
<div class="kx-flex">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<div class="kx-flex">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div class="kx-ml--auto">⏪ Flex item 3</div>
</div>
<div class="kx-flex">
<div class="kx-mr--auto">Flex item 1 ⏩</div>
<div>Flex item 2</div>
<div class="kx-ml--auto">⏪ Flex item 3</div>
</div>
<div class="kx-flex">
<div>Flex item 1</div>
<div class="kx-mx--auto">⏪ Flex item 2 ⏩</div>
<div>Flex item 3</div>
</div>
<div class="kx-flex">
<div class="kx-mr--auto">Flex item 1 ⏩</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<div class="kx-flex">
<div class="kx-ml--auto">⏪ Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
With align-items
Usually, margin-top: auto and margin-bottom: auto both resolves to 0px according to W3C.
But in some flexbox context they actually work. Her are som examples where we move one flex item vertically by combining kx-flex-column and utilities for align-items with utilities for vertical auto margins kx-mb--auto, kx-my--auto and kx-mt--auto.
<div class="kx-flex kx-flex-column kx-align-items-start">
<div class="kx-mb--auto">Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<div class="kx-flex kx-flex-column kx-align-items-center">
<div>Flex item 1</div>
<div class="kx-my--auto">Flex item 2</div>
<div>Flex item 3</div>
</div>
<div class="kx-flex kx-flex-column kx-align-items-end">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div class="kx-mt--auto">Flex item 3</div>
</div>
Wrap
Control how flex items wrap by applying classes for wrapping on the flex container. Choose between kx-flex-nowrap (browser default), kx-flex-wrap or kx-flex-wrap-reverse.
<div class="kx-flex kx-flex-nowrap">...</div>
<div class="kx-flex kx-flex-wrap">...</div>
<div class="kx-flex kx-flex-wrap-reverse">...</div>
Responsive variations available for kx-flex-nowrap
kx-flex-nowrap[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-flex-nowrap@mob-s
Responsive variations for kx-flex-wrap
kx-flex-wrap[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-flex-wrap@mob-s
Responsive variations available for kx-flex-wrap-reverse
kx-flex-wrap-reverse[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-flex-wrap-reverse@mob-s
Align content
Use align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), center, end, between, around, or stretch.
Note: This property has no effect on single rows of flex items.
For demonstration, we’ve set flex-wrap: wrap, increased the number of flex items, and set a static height on the flex container.
kx-align-content-start
<div class="kx-flex kx-flex-wrap kx-align-content-start">
...
</div>
Responsive variations available for kx-align-content-start
kx-align-content-start[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-align-content-start@mob-s
kx-align-content-center
<div class="kx-flex kx-flex-wrap kx-align-content-center" >
...
</div>
Responsive variations available for kx-align-content-center
kx-align-content-center[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-align-content-center@mob-s
kx-align-content-end
<div class="kx-flex kx-flex-wrap kx-align-content-end" >
...
</div>
Responsive variations available for kx-align-content-end
kx-align-content-end[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-align-content-end@mob-s
kx-align-content-between
<div class="kx-flex kx-flex-wrap kx-align-content-between" >
...
</div>
Responsive variations available for kx-align-content-between
kx-align-content-between[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-align-content-between@mob-s
kx-align-content-around
<div class="kx-flex kx-flex-wrap kx-align-content-around" >
...
</div>
Responsive variations available for kx-align-content-around
kx-align-content-around[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-align-content-around@mob-s
kx-align-content-stretch
<div class="kx-flex kx-flex-wrap kx-align-content-stretch">
...
</div>
Responsive variations available for kx-align-content-stretch
kx-align-content-stretch[@mob-s|@mob-m|tab-s|@tab-m|@tab-l|@ltp-s|@ltp-m|@dtp]- Example:
kx-align-content-stretch@mob-s
Resources
- Basic concepts of flexbox, MDN web docs
- A Complete Guide to Flexbox