CSS | Flexbox Layout

The flexible boxes, or flexbox, is a new layout mode in CSS3.

HTML

<div class="flex">
    <div></div>
    <div></div>
    <div></div>
    
  </div>

CSS

.flex{
	width: 100%;
	height: 200px;
	border: 1px solid #ddd;
	font: 14px Arial;
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
  flex-wrap:wrap;
}

.flex > div{
	width: 30px;
	flex: 1 1 auto;
	-webkit-flex: 1 1 auto;
	transition: width 0.7s ease-out;	
	-webkit-transition: width 0.7s ease-out;	
}

.flex > div:nth-child(1){ background : #007AA2; }

.flex > div:nth-child(2){ background : #FFF; }

.flex > div:nth-child(3){ background : #7FCADE; }

.flex > div:hover{
	width: 20%;
}