Wie Raum zwischen den Zeilen mit flex-wrap loswerden: wrap

Question

Ich mache einen einfachen Stift auf CodePen, wo Sie Blöcke aus einer Box hinzufügen und entfernen können. Es ist wirklich einfach und funktioniert bis auf eine Sache vollständig. Ich benutze flex-wrap, um den Überlauf in separate Spalten zu machen, aber es hat einen unerwünschten Platz in der Mitte der Zeilen. Ich bin mir bewusst, dass dies der Standard von flex-wrap ist, aber ich frage mich, ob es eine Möglichkeit gibt, den Raum zwischen den Zeilen loszuwerden. Meine Feder ist hier: http://codepen.io/TheAndersMan/pen/KggVOj

Auch ich bin mit SCSS

Hier ist mein HTML:

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

Meine 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; 
     } 
     } 
    } 

Und meine 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 ist es Kann ich das irgendwie reparieren?

Answer 1

Fügen Sie diese auf Ihre .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>

Weiterführende Literatur: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content