플렉스 랩으로 행간 공간 제거하는 방법 : 랩

Question

나는 상자에서 블록을 추가하고 제거 할 수있는 간단한 펜을 CodePen에 만들고 있습니다. 정말 간단하고, 한 가지를 제외하고는 완전히 작동합니다. 오버플로를 별도의 열로 이동시키기 위해 플렉스 랩을 사용하고 있지만 행 중간에 원하지 않는 공간이 있습니다. 나는 이것이 flex-wrap의 기본값이라는 것을 알고 있지만, 행 사이의 공간을 없애는 방법이 있는지 궁금해하고있다. 내 펜이 여기에 있습니다 :

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

내가 여기

SCSS

을 사용하고 또한 http://codepen.io/TheAndersMan/pen/KggVOj

것은, 내 HTML입니다

그렇습니다. 내가 고칠 수있는 방법이 있니?

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