0

I want to replicate columns with equal padding using flexbox, they need to be as seen on this image:

enter image description here

The lighter gray box is invisible, the padding between boxes should be equal, but the side boxes should have no padding on the side that's not touching any box. Before, I would do something like:

HTML

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS

.box{
    width: 32%;
    margin-bottom: 2%;
}

.box:nth-of-type(3n - 1){
    margin-left: 2%;
    margin-right: 2%;
}

And then for making them responsive I would add a breakpoint and remove the left and right margins, set the width to 49% for example and then add a margin-left with 2% to the nth-of-type(2n).

How can I replicate this with flexbox? Thanks in advance!

nick
  • 2,819
  • 5
  • 33
  • 69
  • 1
    `justify-content:space-between`? – Paulie_D Dec 13 '16 at 16:15
  • Possible duplicate of [How do I create a row of justified elements with fluid spacing using CSS?](http://stackoverflow.com/questions/14027385/how-do-i-create-a-row-of-justified-elements-with-fluid-spacing-using-css) – Paul Sweatte Mar 03 '17 at 17:53

0 Answers0