Modules
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.
<div class="flex flex-baseline">
<span class="label">Label</span>
<span>Text</span>
<span class="caption caption-positive caption-caps">Caption</span>
</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>
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 b-dark-10 bg-light r-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 Spacing module you can push flex column to the right edge with the ml-auto
class.
<div class="item flex">
<div class="item-column">...</div>
<div class="item-column ml-auto">...</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 sh-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.
<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-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.