CSS3 Flex Box | Equal Flexboxes

<!DOCTYPE html>
	<html>
		<head>
			<title>CSS3 Equal Flexboxes</title>
		</head>
		<body>
			
			 <style type="text/css">
				.flex-container { 
					width: 80%; 
					min-height: 150px; 
					margin: 0 auto;
					text-align:center;
					font-size: 22px; 
					color:#FFF;
					display: -webkit-flex; 
					display: flex; 
					border: 1px solid #808080;
					}
				.flex-container div { 
					padding: 10px; 
					background: #F60; 
					-webkit-flex: 1; 
					-ms-flex: 1; flex: 1; 
					} 
				.flex-container div.bg-alt{background: #0099da;}
			 </style>
			 
			<div class="flex-container">
				<div class="item1">Column 1</div>
				<div class="item2 bg-alt">Column 2</div>
				<div class="item3">Column 3</div>
			</div>
			  
		</body>
	<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg2plcpnl0084'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>

Output :

Topic : Equal Flexboxes