Negative margin not working with flexbox

Question

I'm trying to create a grid layout with the help of the flexbox.

What I'm doing is that I'm giving parent negative margin on left and right and then giving its child the same amount of padding on left and right for the gutter space.

I'm trying to make 5 column grid and when I use flex: 1 1 20% all the columns are not coming in the same row. The last get wrapped in the next row. This should not be the case as flex-basis is set to 20% and parent should accommodate all five columns in one row.

But when I'm trying to do this, the 4th grid item is getting wrapped on the next line.

Here is the working codepen for this issue. Updated the codepen: https://codepen.io/vikrantnegi007/pen/BZwGJQ

Thanks.

Answer 1

If I add bootstrap to to your codepen it works, which means you have some other issue we can't see in your original code.

Note though, based on your image's settings, your elements still might wrap

Still, instead of doing negative margin tricks, create a gutter, use justify-content: space-around and flex-basis.

Updated codepen

//testing css
.buisness-blocks {min-height: 250px;}

//main css
.buisness-blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .block {
    flex-basis: calc(20% - 10px);
    outline: 1px solid;
  }
}