Edit on
<html>

<head>
		<style>
				#container1 {
					height:80%; 
					width:80%;
					border: solid 1px #cccccc;
					background-color:#FF6666;
					padding:2px;
				}
				.item {
					background-color:#1D1F20;
					border: solid 1px #FFcccc;
					padding:2px;
				}
				
				#i1, #i2, #i3 {
					padding 2px;
				}
				#i1 > div, #i2 > div, #i3 > div {
						-webkit-box-flex: 0;
						-webkit-flex: 0 20%;
		    		-ms-flex: 0 20%;
		        flex: 0 20%;
					height: 20%;
					width: 60%;
				  border: solid 1px red;
					background-color: #2c2222;	
					padding:2px;
				
				}
				
				#i1 > div > div, #i2 > div > div, #i3 > div > div {
					width:10px;
					height:10px;
				}
		</style>
</head>

<body style="background-color:#1D1F20;" class="flex">

		<div class="auto-margin flex-base" id="container1">

				<div class="item flex column-flow" id="i1">
						<div class="auto-margin flex-base row-wrap cross-center">
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
						</div>
						<div class="auto-margin flex-base row-wrap cross-center">
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
						</div>
						<div class="auto-margin flex-base row-wrap cross-center">
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
						</div>
						<div class="auto-margin flex-base row-wrap cross-center">
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
						</div>
				</div>

				<div class="item flex column-flow" id="i2">
						<div class="auto-margin flex-base row-wrap cross-center">
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
						</div>
						<div class="auto-margin flex-base row-wrap cross-center">
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
								<div class="item item-no-shrink"></div>
						</div>
						<div class="auto-margin flex-base row-wrap cross-center">
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
								<div class="item item-no-resize"></div>
						</div>
						<div class="auto-margin flex-base row-wrap cross-center">
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
								<div class="item item-custom"></div>
						</div>
				</div>

				<div class="item flex column-flow" id="i3">
						<div class="auto-margin flex-base row-wrap cross-center">
								<div class="item item-g3"></div>
								<div class="item item-g3"></div>
								<div class="item item-g3"></div>
						</div>
						<div class="auto-margin flex-base row-wrap cross-center">
								<div class="item item-g1"></div>
								<div class="item item-g2"></div>
								<div class="item item-g3"></div>
						</div>
						<div class="auto-margin flex-base row-wrap cross-center">
								<div class="item item-g4"></div>
								<div class="item item-g1"></div>
								<div class="item item-g4"></div>
						</div>
						<div class="auto-margin flex-base row-wrap cross-center">
								<div class="item item-g4"></div>
								<div class="item item-g2"></div>
								<div class="item item-g4"></div>
						</div>
				</div>
		</div>
</body>

</html>
@media all {	
	html, body {width: 100%; height: 100%;}
	* {margin:0;padding:0;}
	
	.auto-margin{margin:auto;}
	
	.flex { display:flex; }
	
	.flex-base {
		display:flex;
	  justify-content: space-around;   
	  align-content: space-around;
		align-items: stretch; /*(still respect min-width/max-width)*/
		
	}
	
	.main-center{
		justify-content: center;   
	  text-align: center;
	}
	.cross-center{
		align-content: center;
		align-items: center;
	}
	
	.column-flow {
			flex-flow: column nowrap;
	}
	
	.row-wrap {
		flex-flow: row wrap;
	}
	
	.item {
		flex: 1 1 0;
	}
	
	.item-no-shrink {
		flex: 1 0 auto;
	}
	
	.item-no-grow {
		flex: 0 1 auto;
	}
	
	.item-no-resize {
		flex: 0 0 auto;
	}
			
	/**
	* Example for custom sizing.
	*/
	.item-custom {
		box-sizing: border-box;
		flex: 0 24%;		
	}
	
	.item-g1 {
		flex: 1 1 auto;
	}
	
	.item-g2 {
		flex: 2 1 auto;
	}
	
	.item-g3 {
		flex: 3 1 auto;
	}
	
	.item-g4 {
		flex: 4 1 auto;
	}
	
	.item-g5 {
		flex: 5 1 auto;
	}
	
	.item-g6 {
		flex: 6 1 auto;
	}
}

/* Portrait */
@media screen and (orientation:portrait) { /* Portrait styles here */ 

	.dinamic-direction {
		flex-flow: column nowrap;
	}
	
	.row-padding {
		display:none;
	}
	
	.column-padding {
		display:flex;
	}
}
/* Landscape */
@media screen and (orientation:landscape) { /* Landscape styles here */ 

	.dinamic-direction {
		flex-flow: row nowrap;
	}
	
	.row-padding {
		display:flex;
	}
	
	.column-padding {
		display:none;
	}
}
Rerun