Kickstart

Layout Utilities

.block display: block;
.inline display: inline;
.inline-block display: inline-block;
.flex display: flex;
.inline-flex display: inline-flex;
.right float: right;
.left float: left;
.relative position: relative;
.absolute position: absolute;
.hide display: none;
.hidden visibility: hidden;
.visible visibility: visible;
.v-center position: absolute; top: 50%; transform: translateY(-50%);
.disabled pointer-events: none; opacity: $disabled-opacity; // 0.4 !default

Flexbox

Flex Direction

.column flex-direction: column;
.row flex-direction: row;

Flex Wrap

.wrap flex-wrap: wrap;

Flex Align

.align-center align-items: center;
.align-start align-items: flex-start;
.align-baseline align-items: baseline;
.align-end align-items: flex-end;
.align-stretch align-items: stretch;

Flex Justify Content

.jc-center justify-content: center;
.jc-between justify-content: space-between;
.jc-end justify-content: flex-end;
.jc-stretch justify-content: stretch;

Flex Align Self

.align-self-center align-self: center;