1
我正在CodePen上做一個簡單的筆,在這裏你可以添加和刪除框中的塊。這非常簡單,除了一件事情之外,它正在充分發揮作用。我正在使用flex-wrap使溢出進入單獨的列,但在行的中間有一個不需要的空間。我知道這是默認的flex-wrap,但我想知道是否有辦法擺脫行之間的空間。我的筆是在這裏:http://codepen.io/TheAndersMan/pen/KggVOj如何擺脫行與flex-wrap之間的空間:包裝
而且,我使用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();
})
所以那裏任何方式我可以解決這個問題?