如何使用 flex-wrap 消除行之间的空间：换行 [重复]答案

【问题标题】：How to get rid of space between rows with flex-wrap: wrap [duplicate]如何使用 flex-wrap 消除行之间的空间：换行 [重复]
【发布时间】：2017-01-27 14:10:07
【问题描述】：

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

那么有什么办法可以解决这个问题吗？

【问题讨论】：

标签： javascript html css sass flexbox

【解决方案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

【讨论】：