TheAndersMan TheAndersMan - 2 months ago 8
Javascript Question

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

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?

Answer

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

Comments