gpt4 book ai didi

javascript - 如何使用 flex-wrap : wrap 去除行与行之间的空间

转载 作者:可可西里 更新时间:2023-11-01 13:47:49 27 4
gpt4 key购买 nike

<分区>

我正在 CodePen 上制作一个简单的笔,您可以在其中添加和移除方 block 。它真的很简单,而且除了一件事之外它可以完全工作。我正在使用 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();
})

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

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com