flexbox layout

by phloe

HTML

<div class="row">

	<div class="cell cell-a">
		<div></div>
		<div></div>
		<div></div>
	</div>

	<div class="cell cell-b">
		<div></div>
		<div></div>
		<div></div>
	</div>

</div>

CSS

.row {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}

.cell {
	display: flex;
	min-width: calc();
	min-width: 50%;
	width: calc((640px - 100%) * 640);
	max-width: 100%;
	flex-wrap: wrap;
}

.cell-a > * {
	background-color: green;
	min-height: calc(100px + 25vh);
	flex-basis: calc(100% - 20px);
	margin: 10px;
}

.cell-b > * {
	flex: 1 0 calc(50% - 20px);
	min-height: calc(50px + 10vh);
	background-color: red;
	margin: 10px;
}
.cell-b > *:nth-child(2) {
	background-color: blue;
	min-height: calc(100px + 10vh);
}
.cell-b > *:nth-child(3) {
	background-color: green;
	min-height: calc(50px + 5vh);
	flex-basis: calc(100% - 20px);
	align-self: center;
}