Flexbox

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" style="min-height: 12.5rem">
    <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" style="min-height: 12.5rem">
    <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" style="min-height: 12.5rem">
    <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" style="min-height: 12.5rem">
    ...
</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" style="min-height: 12.5rem">
    ...
</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" style="min-height: 12.5rem">
    ...
</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" style="min-height: 12.5rem">
    ...
</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" style="min-height: 12.5rem">
    ...
</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" style="min-height: 12.5rem">
    ...
</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