弹性框空间均匀，间距不均匀

Question

我有以下代码片段，想知道为什么前三个元素之间的间距与第 3 个和第 4 个元素之间的间距不同

.textFMT2 {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
font-size: 1.5vw;
}
.links4 {
width: 100%;
}
.links4 span {
display: block;
background-color: #538231;
text-align: center;
width: 50%;
border-radius: 10vw;
padding: 1vw 0;
margin: 0 auto;
}
span {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
.textFMT2 .arrowsForScroll {
position: relative;
}
.arrowsForScroll {
position: absolute;
bottom: 2vw;
}
.arrowsForScroll {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
}
a.left, a.right {
text-decoration: none;
font-weight: bolder;
font-size: 32px;
}
.left, .right {
display: none;
}
.sections {
background-color: #b3d7f7;
/* width: 32vw; */
color: #538231;
font-size: 16px;
text-align: center;
position: relative;
height: 100%;
}
.links4 a {
text-decoration: none;
color: white;
}

<div class="textFMT2">
<div class="links4">
<span><a href="https://www.sustainablewestonma.org/swag/public/php/homeCtrl.php?place=Get Involved">Sign up for our<br>Quarterly Newsletter</a></span>
</div>
<div class="links4">
<span><a href="https://www.sustainablewestonma.org/swag/public/php/homeCtrl.php?place=Calendar">Attend an<br>Event</a></span>
</div>
<div class="links4">
<span><a href="https://www.sustainablewestonma.org/swag/public/php/homeCtrl.php?place=Get Involved">Volunteer with<br>SWAG</a></span>
</div>
<div class="arrowsForScroll">
<a class="left" href="#section2"><!--&uarr;--> &nbsp;</a>    
<div class="links4">
<span><a href="https://www.sustainablewestonma.org/swag/public/php/homeCtrl.php?place=Donate">Donate to help<br>our work</a></span>
</div>
<a class="right" href="#">&nbsp;</a>
</div>
</div>

Answer 1

创建不同的间隙大小是因为您在此处将位置设置为relative：

.textFMT2 .arrowsForScroll {
position: relative;
}

具有position: relative;的元素相对于其正常位置进行定位。

设置相对位置元素的顶部、右侧、底部和左侧属性将导致其调整偏离其正常位置。其他内容将不会进行调整以适应元素留下的任何间隙。

因此，您需要将其显式设置为static

.textFMT2 .arrowsForScroll {
position: static;
}

静态定位的元素不受顶部、底部、左侧和右侧属性的影响。

具有position: static;的元素不会以任何特殊方式定位;它始终根据页面的正常流程进行定位

编辑：整个问题源于将弹性项目设置为.arrowsForScrollposition: absolute(顺便说一下，它被定义两次(，我假设您编写了选择器.textFMT2 .arrowsForScroll来弥补这一点。因此，也可以通过简单地完全删除这两个选择器来修复布局：

.textFMT2 .arrowsForScroll {
position: relative;
}
.arrowsForScroll {
position: absolute;
bottom: 2vw;
}