0

Vertical Align with flexbox

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.

21st Nov 2016, 7:05 PM
Kardhyr
Kardhyr - avatar
4 Answers
9th Dec 2016, 5:02 PM
$machitgarha
$machitgarha - avatar
+ 3
I will see and answer...
11th Dec 2016, 6:35 PM
$machitgarha
$machitgarha - avatar
+ 2
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
10th Dec 2016, 2:01 AM
Kardhyr
Kardhyr - avatar
+ 2
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.
11th Dec 2016, 7:19 PM
$machitgarha
$machitgarha - avatar