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;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

如何使用flex-wrap：wrap来消除行之间的空间

1 个答案: