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.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<div class="flex flex-overflow">
    <div class="card bg-light shadow-150 p-6">
        <div class="card-head">...</div>
        <div class="card-body">...</div>
    </div>
    ...
</div>

Layout #

Superkube has flex classes to easily create a layout with a fixed width sidebar.

Sidebar
Content

<div class="flex-layout">
    <div class="flex-sidebar">...</div>
    <div class="flex-content">...</div>
</div>

Override width

By default, the sidebar is 300px wide. This can be changed by overriding the value in $scales. See also how to work with scales for modules.


// =Scales
$scales: map-extend($scales, (
    sidebar: (
        base: 240px
    )
));

Add width

You can add your own value of sidebar width, for example, if you use several sidebar variants in your project.


// =Scales
$scales: map-extend($scales, (
    sidebar: (
        custom: 360px
    )
));

Superkube will automatically create a flex-sidebar-custom class with the new sidebar width value.


<div class="flex-layout">
    <div class="flex-sidebar flex-sidebar-custom">...</div>
    <div class="flex-content">...</div>
</div>

Responsive

On small screens, flex-layout will place the sidebar and content in a column, and the sidebar will get 100% width.