Flex

This module helps to set flex properties to the elements.

Container #

The flex class sets the display: flex property of the element. By default, the flex class sets a horizontal (row) direction for items.


<div class="item flex">
    <div class="item-column bg-aluminum">...</div>
    <div class="item-column bg-silver">...</div>
    <div class="item-column bg-platinum">...</div>
</div>

Use the flex-column-sm modifier to set a vertical (column) direction on small screens.


<div class="item flex flex-column-sm">
    <div class="item-column bg-aluminum">...</div>
    <div class="item-column bg-silver">...</div>
    <div class="item-column bg-platinum">...</div>
</div>

Column #

The flex-column modifier makes items inside a flex container with column direction.


<div class="item flex flex-column">
    <div class="item-column bg-aluminum">...</div>
    <div class="item-column bg-silver">...</div>
    <div class="item-column bg-platinum">...</div>
</div>

Use the flex-row-sm modifier to set a horizontal (row) direction for flex items on small screens.


<div class="item flex flex-column flex-row-sm">
    <div class="item-column bg-aluminum">...</div>
    <div class="item-column bg-silver">...</div>
    <div class="item-column bg-platinum">...</div>
</div>

Align items #

Superkube has several classes that vertically align items within the flex container.

flex-top
flex-baseline
flex-middle
flex-bottom

Flex container has top alignment for items by default. So flex-top is used more often when you want to override the alignment to top, for example, if it is specified in the element class.


<div class="item flex flex-top">
    <div class="item-column bg-aluminum">...</div>
    <div class="item-column bg-silver">...</div>
    <div class="item-column bg-platinum">...</div>
</div>

The flex-middle class aligns items to the vertical center of the flex container.


<div class="item flex flex-middle">
    <div class="item-column bg-aluminum">...</div>
    <div class="item-column bg-silver">...</div>
    <div class="item-column bg-platinum">...</div>
</div>

The flex-bottom class aligns items to the bottom of the flex container.


<div class="item flex flex-bottom">
    <div class="item-column bg-aluminum">...</div>
    <div class="item-column bg-silver">...</div>
    <div class="item-column bg-platinum">...</div>
</div>

The flex-baseline aligns items to the baseline. This is mostly useful if the container has text elements in it.

Label Text Link


<div class="flex flex-baseline">
    <span class="label">Label</span>
    <span>Text</span>
    <a href="#">Link</a>
</div>

Responsive

Use these classes to change the vertical alignment behavior of items inside the flex container.

flex-top-sm
flex-baseline-sm
flex-middle-sm
flex-bottom-sm


<div class="item flex flex-middle flex-top-sm">
    <div class="item-column">...</div>
    <div class="item-column">...</div>
</div>

Justify content #

Superkube has several classes for distributing items inside a flex container.

flex-start
flex-end
flex-between
flex-around
flex-center

Flex container has a flex-start distribution of items by default. So flex-start is used more often when you want to override the distribution to start, for example, if it is specified in the element class.


<div class="item flex flex-start">
    <div class="item-column bg-aluminum">...</div>
    <div class="item-column bg-silver">...</div>
    <div class="item-column bg-platinum">...</div>
</div>

Use the flex-end class to distribute items from the right edge in the flex container.


<div class="item flex flex-end">
    <div class="item-column bg-aluminum">...</div>
    <div class="item-column bg-silver">...</div>
    <div class="item-column bg-platinum">...</div>
</div>

Use the flex-between class to distribute items with space-between property in the flex container.


<div class="item flex flex-between">
    <div class="item-column bg-platinum">...</div>
    <div class="item-column bg-platinum">...</div>
    <div class="item-column bg-platinum">...</div>
</div>

Use the flex-around class to distribute items with space-around property in the flex container.


<div class="item flex flex-around">
    <div class="item-column bg-platinum">...</div>
    <div class="item-column bg-platinum">...</div>
    <div class="item-column bg-platinum">...</div>
</div>

Use the flex-center class to distribute item horizontally centered inside the flex container.


<div class="item flex flex-center">
    <div class="item-column bg-platinum">...</div>
</div>

Responsive

Use these classes to change the distribution of items inside the flex container.

flex-start-sm
flex-end-sm
flex-between-sm
flex-around-sm


<div class="item flex flex-between flex-start-sm">
<div class="item-column">...</div>
<div class="item-column">...</div>
</div>

Auto #

Using the flex-auto you can fill the flex column to the full available width.


<div class="item flex">
    <div class="item-column">...</div>
    <div class="item-column flex-auto">...</div>
</div>

None #

The flex-none modifier turns off the flex column filling the entire available width.


<div class="item flex">
    <div class="item-column flex-auto">...</div>
    <div class="item-column flex-auto flex-none">...</div>
</div>

Flex off #

Using the flex-off you can turn off the flex column to fill the entire available width of the container. This is equivalent to specifying flex: 0 and is useful if the element has flex: 1 or auto in its properties.


<div class="item-with-flex-auto flex-off">...</div>

The flex-off-sm modifier does the same thing but on small screens.


<div class="item-with-flex-auto flex-off-sm">...</div>

Nowrap #

Using the flex-nowrap class you can specify that flex items are not moved to a new line.


<div class="item flex flex-nowrap">
   <div class="item-column">...</div>
   <div class="item-column">...</div>
</div>

The flex-wrap-sm class specifies that flex items on small screens can be moved to a new line.


<div class="item flex flex-nowrap flex-wrap-sm">
   <div class="item-column">...</div>
   <div class="item-column">...</div>
</div>

Shrink off #

To make the image to the left of the content, you can apply a flex modifier to the card and set a flex-shrink-off modifier for the block with the image, so that the content block does not shrink it.

Famous quotes
on nature

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.


<div class="card bg-light radius-base flex">
    <div class="card-image image-cover flex-shrink-off">
        <img src="...">
    </div>
    <div class="card-box p-6 pb-10">...</div>
</div>

Push right #

Using the Push helper you can push flex column to the right edge with the push-right class.


<div class="item flex">
    <div class="item-column">...</div>
    <div class="item-column push-right">...</div>
</div>

Overflow #

Using the flex-overflow modifier you can make items overflow the row so that they can be scrolled horizontally in it. See also the Row module which helps to arrange items in the row with the gap between them.