Flexbox basic columns

by PhilQ

HTML

<div id="main">
	
	<div class="c12">Some text</div>
	<div class="c6">Some text</div>
	<div class="c6">Some text</div>
	<div class="c4">Some text. Some text. Some text. Some text. Some text</div>
	<div class="c4">Some text</div>
	<div class="c4">Some text. Some text. Some text. Some text. Some text</div>
	<div class="c4">Some text</div>
	<div class="c8">Some text</div>
	
</div>

SCSS

#main {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	align-content: flex-start;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	background-color: rgba(255, 0, 0, 0.3);

	> div {
		width: 100%;
		background: #fff;

		&:nth-child(2n) {
			background: #ccc;
		}
	}
}

$columns: 12;
@mixin col-list {
	@for $i from 1 through $columns {
		$v: ($i*100) / 12;
		#main > div.c#{$i} { width: unquote('#{$v}%'); }
	}
}

@include col-list;