flexbox space-evenly not spacing evenly

Question

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

.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; 的元素相对于其正常位置定位。

设置相对定位元素的top、right、bottom、left属性会导致其偏离正常位置。其他内容将不会调整以适应元素留下的任何间隙。

所以需要显式设置为static

.textFMT2 .arrowsForScroll {
    position: static;
}

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

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

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

.textFMT2 .arrowsForScroll {
    position: relative;
}

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

flexbox space-evenly not spacing evenly

flexbox space-evenly not spacing evenly

css

css-position

flexbox