How to get rid of space between rows with flex-wrap: wrap

Question

I am making a simple pen on CodePen, where you can add and remove blocks from a box. It's really simple, and it is working fully except for one thing. I am using flex-wrap to make the overflow go into separate columns but it has an unwanted space in the middle of the rows. I am awarer that this is the default of flex-wrap, but I am wondering if there is a way to get rid of the space between the rows. My pen is here: http://codepen.io/TheAndersMan/pen/KggVOj

Also, I am using SCSS

Here is my HTML:

     <div class="buttonWrap">
         <button>Add</button>
         <button class="two">Subtract</button>
     </div>
     <div class="box"></div>

My CSS:

    @import 'https://fonts.googleapis.com/css?family=Roboto:300';

    body {
       margin: 0;
       display: flex;
       align-items: center;
    }

    .buttonWrap {
       margin-top: 37.5vh;
       margin-left: 7.5vw;
       &:nth-child(1) {
       margin-bottom: 5vh;
    }
    button {
      cursor: pointer;
      outline: none;
      background: #3f51b5;
      border: none;
      color: white;
      width: 10vw;
      height: 10vh;
      font-size: 2em;
      font-family: roboto;
      display: block;
     // margin-top: 5vh;
    }
   .two {
       margin-top: 5vh;
      }
    }

    .box {
     position: absolute;
     height: 50vh;
     width: 50vw;
     left: 25vw;
     top: 25vh;
     background: #ff5252;
     display: flex;
     flex-wrap: wrap;
   }

   .newDiv {
      background: #3f51b5;
      width: 5vw;
      height: 5vh;
      z-index: 10;
    }

    @media (max-width: 1350px) {
      .buttonWrap {
        button {
          font-size: 1em;
        }
      }
    }

And my JS:

    var add = document.querySelector("button");
    var subtract = document.querySelector(".two");
    var box = document.querySelector(".box");

    add.addEventListener("click", function() {
      var newDiv = document.createElement("div"); 
      var newContent = document.createTextNode(""); 
      newDiv.classList.add("newDiv")
      newDiv.appendChild(newContent);
      var currentDiv = document.getElementById("div1"); 
      document.body.insertBefore(newDiv, currentDiv);
      box.appendChild(newDiv);
   })

   subtract.addEventListener("click", function() {
     document.querySelector(".newDiv:last-of-type").remove();
   })

So is there any way I can fix this?

score 1 · Accepted Answer · answered Sep 19 '16 at 19:38

Add this to your .box:

align-content: flex-start;

    var add = document.querySelector("button");
    var subtract = document.querySelector(".two");
    var box = document.querySelector(".box");

    add.addEventListener("click", function() {
      var newDiv = document.createElement("div"); 
      var newContent = document.createTextNode(""); 
      newDiv.classList.add("newDiv")
      newDiv.appendChild(newContent);
      var currentDiv = document.getElementById("div1"); 
      document.body.insertBefore(newDiv, currentDiv);
      box.appendChild(newDiv);
   })

   subtract.addEventListener("click", function() {
     document.querySelector(".newDiv:last-of-type").remove();
   })

Roboto:300';

    body {
       margin: 0;
       display: flex;
       align-items: center;
    }

    .buttonWrap {
       margin-top: 37.5vh;
       margin-left: 7.5vw;
       &:nth-child(1) {
       margin-bottom: 5vh;
    }
    button {
      cursor: pointer;
      outline: none;
      background: #3f51b5;
      border: none;
      color: white;
      width: 10vw;
      height: 10vh;
      font-size: 2em;
      font-family: roboto;
      display: block;
     // margin-top: 5vh;
    }
   .two {
       margin-top: 5vh;
      }
    }

    .box {
     position: absolute;
     height: 50vh;
     width: 50vw;
     left: 25vw;
     top: 25vh;
     background: #ff5252;
     display: flex;
     flex-wrap: wrap;
     align-content: flex-start; /* <-- this here */
   }

   .newDiv {
      background: #3f51b5;
      width: 5vw;
      height: 5vh;
      z-index: 10;
    }

    @media (max-width: 1350px) {
      .buttonWrap {
        button {
          font-size: 1em;
        }
      }
    }

     <div class="buttonWrap">
         <button>Add</button>
         <button class="two">Subtract</button>
     </div>
     <div class="box"></div>

Further reading: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

How to get rid of space between rows with flex-wrap: wrap

1 Answers1