首页 文章

如何使用flex-wrap去掉行之间的空间：wrap [duplicate]

提问于
浏览 次
1

这个问题在这里已有答案：

我在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 回答

  • 0

    将其添加到 .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

    回复于

相关问题