如何摆脱行与flex-wrap之间的空间：包装

Question

我正在CodePen上做一个简单的笔，在这里你可以添加和删除框中的块。这非常简单，除了一件事情之外，它正在充分发挥作用。我正在使用flex-wrap使溢出进入单独的列，但在行的中间有一个不需要的空间。我知道这是默认的flex-wrap，但我想知道是否有办法摆脱行之间的空间。我的笔是在这里：http://codepen.io/TheAndersMan/pen/KggVOj

而且，我使用SCSS

这里是我的HTML：

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

我的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; 
     } 
     } 
    } 

而我的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(); 
    }) 

所以那里任何方式我可以解决这个问题？

Answer 1

添加到您的.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>

延伸阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/align-content