This is a Work in progress of a minimal flexbox grid

flexbox minimal grid

// https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.flexbox-container-block {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}


.flexbox-container-inline {
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	display: inline-flex;

}

.flexbox-container-direction-row {
	flex-direction: row;
}
.flexbox-container-direction-col {
	flex-direction: column;
}

.flexbox-container-wrap-on {
	flex-wrap: wrap;
}
.flexbox-container-wrap-off {
	flex-wrap: nowrap;
}

.flexbox-container-justify-left {
	justify-content: flex-start;
}
.flexbox-container-justify-right {
	justify-content: flex-end;
}
.flexbox-container-justify-center {
	justify-content: center;
}
.flexbox-container-justify-outer {
	justify-content: space-between;
}
.flexbox-container-justify-inner {
	justify-content: space-around;
}

.flexbox-container-valign-top{
	align-items: flex-start;
}
.flexbox-container-valign-bottom{
	align-items: flex-end;
}
.flexbox-container-valign-center{
	align-items: center;
}
.flexbox-container-valign-baseline{
	align-items: baseline;
}
.flexbox-container-valign-stretch{
	align-items: stretch;
}

.flexbox-container-vspacing-left {
	align-content: flex-start;
}
.flexbox-container-vspacing-right {
	align-content: flex-end;
}
.flexbox-container-vspacing-center {
	align-content: center;
}
.flexbox-container-vspacing-outer {
	align-content: space-between;
}
.flexbox-container-vspacing-inner {
	align-content: space-around;
}

// flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
@mixin flex-item($fg: 1, $fs: null, $fb: null) {
	-webkit-box-flex: $fg $fs $fb;
	-moz-box-flex: $fg $fs $fb;
	-webkit-flex: $fg $fs $fb;
	-ms-flex: $fg $fs $fb;
	flex: $fg $fs $fb;
}

.flex-item-none {
	@include flex-item(none);
}

.flex-item-auto {
	@include flex-item(auto);
}


@mixin flex-item-order($val) {
	-webkit-box-ordinal-group: $val;
	-moz-box-ordinal-group: $val;
	-ms-flex-order: $val;
	-webkit-order: $val;
	order: $val;
}

.flexbox-item-valign-top{
	align-self: flex-start;
}
.flexbox-item-valign-bottom{
	align-self: flex-end;
}
.flexbox-item-valign-center{
	align-self: center;
}
.flexbox-item-valign-baseline{
	align-self: baseline;
}
.flexbox-item-valign-stretch{
	align-self: stretch;
}

// ----- MY CLASSES ----

.grid {
	@extend .flexbox-container-block;
	@extend .flexbox-container-direction-row;
	@extend .flexbox-container-wrap-on;
	@extend .flexbox-container-justify-outer;
	@extend .flexbox-container-valign-stretch;
	@extend .flexbox-container-vspacing-outer;

	// MARGINI (TEST)
	&.gutter 
	{
			margin-right: -1em;
			margin-left: -1em;
			
		> .cell {
			padding-right: 1em;
			padding-left: 1em;
		}
	}

}


.cell {
	//@include flex-item(1, 0, auto);
	@include flex-item(0, 0, 100%);
}

.cell.auto {
	@include flex-item(1, 0, auto);
}


@mixin cell-builder($num-cells, $dim:''){
	@for $i from 1 through $num-cells {
		@for $j from 1 through $i {
			.cell.#{$dim}-#{$j}-#{$i}{
				@include flex-item(0, 0, (100%/$i)*$j );
			}
		}
	}
}


@include cell-builder(5, 's');

@mixin flex-item-order-builder($num-cells, $dim:''){
	@for $i from 0 to $num-cells{
		.order-#{$dim}-#{$i + 1}{
			@include flex-item-order( $i + 1 );
		}
	}
}

@include flex-item-order-builder(5, 's');

// TODO: mettere in bella i breakpoints

// Media queries
$small-screen: 480px;
$medium-screen: 600px;
$large-screen:  768px;
$x-large-screen: 1024px;
$xx-large-screen: 1280px;


//  $small: "only screen and (max-width: #{$small-screen})";
// @media #{$medium}{

// TODO: scrivere tramite loop

@media only screen and (min-device-width : 481px) {
	@include cell-builder(5, 'sm');
	@include flex-item-order-builder(5, 'sm');
}

@media only screen and (min-device-width : 601px) {
	@include cell-builder(5, 'md');
	@include flex-item-order-builder(5, 'md');
}

@media only screen and (min-device-width : 769px) {
	@include cell-builder(5, 'lg');
	@include flex-item-order-builder(5, 'lg');
}

@media only screen and (min-device-width : 1025px) {
	@include cell-builder(5, 'xlg');
	@include flex-item-order-builder(5, 'xlg');
}

@media only screen and (min-device-width : 1225px) {
	@include cell-builder(5, 'xxlg');
	@include flex-item-order-builder(5, 'xxlg');
}