Testing flexbox

index.html

<section class="layers">
	<div class="grid layer">
		<div class="grid__column"></div>
		<div class="grid__column"></div>
		<div class="grid__column"></div>
		<div class="grid__column"></div>
		<div class="grid__column"></div>
		<div class="grid__column"></div>
		<div class="grid__column"></div>
		<div class="grid__column"></div>
		<div class="grid__column"></div>
		<div class="grid__column"></div>
		<div class="grid__column"></div>
		<div class="grid__column"></div>
	</div>
	<div class="rows layer">
		<!-- row 1 -->
		<div class="row">
			<div class="row__item">1/2</div>
			<div class="row__item">1/2</div>
		</div>
		<!-- row 2 -->
		<div class="row">
			<div class="row__item">1/3</div>
			<div class="row__item">1/3</div>
			<div class="row__item">1/3</div>
		</div>
		<!-- row 3-->
		<div class="row">
			<div class="row__item">1/4</div>
			<div class="row__item">1/4</div>
			<div class="row__item">1/4</div>
			<div class="row__item">1/4</div>
		</div>
		<!-- row 4 -->
		<div class="row">
			<div class="row__item">1/6</div>
			<div class="row__item">1/6</div>
			<div class="row__item row__item--double">2/6</div>
			<div class="row__item">1/6</div>
			<div class="row__item">1/6</div>
		</div>
		<!-- row 5 -->
		<div class="row">
			<div class="row__item row__item--double">2/3</div>
			<div class="row__item">1/3</div>
		</div>
		<!-- row 6 -->
		<div class="row">
			<div class="row__item row__item--double">1/2</div>
			<div class="row__item">1/4</div>
			<div class="row__item">1/4</div>
		</div>
		<!-- row 7 with nesting -->
		<div class="row">
			<div class="row__item">1/4</div>
			<div class="row__item">1/4</div>
			<div class="row__item row__item--double">
				1/2
				<div class="row">
					<div class="row__item">1/4</div>
					<div class="row__item">1/4</div>
					<div class="row__item">1/4</div>
					<div class="row__item">1/4</div>
				</div>
			</div>
		</div>
	</div>
</section>

style.css

@color: #c0c0c0;
@background: #fbfbfb;
@gutter: 10px;
@border-size: 1px;

body {
	padding: 0;
	margin: 0;
	color: @color;
	font-family: verdana;
}

.layers {
	position: relative;
	top: 0;
	max-width: 960px;
	min-width: 320px;
	height: 100vh;
	margin: 0 auto;
}

.layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid {
	display: flex;	
}

.grid__column {
	flex-grow: 1;
	flex-shrink: 1;
	
	margin: 0 @gutter;
	background: @background;
	border-left: @border-size dashed @color;
	border-right: @border-size dashed @color;
}

.row {
	display: flex;
}

.row__item {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	
	margin: @gutter;
	padding: 10px 0;
	text-align: center;
	border: @border-size solid @color;
	border-radius: 4px;
	background: #fff;
	
	&--double {
		flex-grow: 2;
		flex-shrink: 2;
		flex-basis: 2 * @border-size + 2 * @gutter;
	}
}

Testing flexbox.markdown

Testing flexbox

Playing with flexbox

A Pen by Julia Rechkunova on CodePen.

License.