A small flexbox based grid system.

• Quick Start Guide

• Sass 3.4

#####Default values:

• 12 comluns per container
• 10px margin

Include the flx-container mixin to your container element. Notice that, because of the nature of flexbox, every element that shall contain grid-elements, requires flx-container.

.container {
	@include flx-container;
}

Compiled CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  flex-direction: row;
  direction: ltr;
}

Add flx-item to any element to define the number of columns it should span.

.item {
	@include flx-item(3);
}

Compiled CSS:

.item {
  flex-basis: -webkit-calc(25% - 7.5px);
  flex-basis: calc(25% - 7.5px);
  margin: 0 10px 10px 0;
}

The last item in each row needs flx-last to reset the spacing margin.

.element.last {
	@include flx-last;
}

Compiled CSS:

.item.last {
  margin-right: 0;
}