Vertical Align with flexbox

Question

I have 3 elements called "item" and I wanna to distribute them among the total width of the page with a proportional distance between them. Is it possible?

}
.item{
float: left;
width: 340px;
height: 100px;
margin: 10px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
padding: 1px 15px 25px 15px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);
}

Just to reinforce: I need to put 3 boxes with the same size side by side with a proportional distance between each other and it need to keep rearrangeable based in the screen size.

Answer 1

See this:
http://www.sololearn.com/app/sololearn/playground/W7cflT0ncFNJ/

Answer 2

I will see and answer...

Answer 3

I saw your code, and I thank you... but my trouble is with 3 boxes. The alignment of them should be one at the center (C) and the other 2 at right (R) and left (L) side. When I turn the screen smaller, the box C will keep at center, but what about R and L? Will they come closer? Will they be rearranged over each other? Please, take a look: www.cen.org.in

Answer 4

Apply these:
div.container {
display: flex;
display: -webkit-flex; /* For Safari */
flex-direction: row;
}
div.item {
margin: auto;
}

Then, delete these lines:
div.container {
display: inline-block;
clear: left;
}
div.item {
margin: 10px
}

Do them, if you having issues, tell me again.