Flex layout and spacing between child divs

Asked Jun 17 '19 at 10:06

Active Jun 17 '19 at 10:06

Viewed 49 times

I have a parent div with display:flex and multiple child divs as shown below. Also the flex-wrap is wrap on the container.

div1 div2 div3 div4
div5 div6 div7

My question is how do I ensure spacing between the 2 rows of divs i.e. top & bottom divs (So, in this case, between div1/div5 OR div2/div6 OR div3/div7)

Also, this is actually totally dynamic i.e. if there is more horizontal space available, my div5 might get rendered on the first row itself.

Just to add, currently I have a margin-top defined on all the child divs. However, that also gives margin-top on div1/div2/div3/div4 What I really want is only margin-top on divs which get rendered dynamically from the 2nd row ownwards ?

Hope I am able to explain the exact issue.

asked Jun 17 '19 at 10:06

copenndthagen

49,230
102
290
442

1

use `align-content: flex-start` property and then use `margin-bottom` for the *flex items*? – kukkuz Jun 17 '19 at 10:08
@testndtv - I think `flex-direction: column` and `justify-content` should set it up correctly. Can you share the relevant code you have worked on? – Tomer Jun 17 '19 at 10:11
1

This might help - https://stackoverflow.com/a/46765935/2427237 – nimsrules Jun 17 '19 at 10:17
1

Flexbox isn't well-suited for this task. Try CSS Grid: https://stackoverflow.com/a/46775239/3597276 – Michael Benjamin Jun 17 '19 at 17:27

Flex layout and spacing between child divs

0 Answers0