i am using dispaly:flexx but my 3 divs are vertical

Question

 I am using the below code but the 3 divs are displaying verticlly not in the horizontal way 

i am not getting why 

 

 

.container {

width: 100%;

height: auto;

background-image: url('../images/noise.png');

display: flex;

flex-direction:row;

justify-content:space-around;

flex-flow:wrap;

}

.firstgrid{

width:20%;

height:300px;

margin:20px;

}

.secondgrid {

width: 20%;

height: 300px;

margin: 20px;

}

.thirdgrid {

width: 20%;

height: 300px;

margin: 20px;

}