Flexbox

Flex wrapper

A flex wrapper that can be used on layout elements that need flexbox:

Only use this class on containers that contain only one child
This is a shrink and grow container

<div class="k-flex-wrapper">
    ...
</div>

Do flex

Do flex item. Useful inside flexing containers on elements that have no pre-defined styling for flexbox

<div class="k-do-flex">
    ...
</div>

Don't flex

Don't flex item. Useful inside flexing containers on elements that have no pre-defined styling for flexbox

<div class="k-dont-flex">
    ...
</div>

Start at different breakpoints

<div class="k-flexbox-from-beta">
    ...
</div>
<div class="k-flexbox-from-charlie">
    ...
</div>
<div class="k-flexbox-column-from-beta">
    ...
</div>
<div class="k-flexbox-column-from-charlie">
    ...
</div>
<div class="k-do-flex-from-beta">
    ...
</div>
<div class="k-do-flex-from-charlie">
    ...
</div>
<div class="k-dont-flex-from-beta">
    ...
</div>
<div class="k-dont-flex-from-charlie">
    ...
</div>

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.