flexbox space-evenly 不均匀间距答案

【问题标题】：flexbox space-evenly not spacing evenlyflexbox space-evenly 不均匀间距
【发布时间】：2020-10-05 11:57:43
【问题描述】：

我有以下sn-p，我想知道为什么前三个元素之间的间距与第三个和第四个元素之间的间距不同

.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>

【问题讨论】：

标签： css flexbox css-position

【解决方案1】：

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

.textFMT2 .arrowsForScroll {
    position: relative;
}

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

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

所以你需要明确设置为static

.textFMT2 .arrowsForScroll {
    position: static;
}

静态定位元素不受 top、bottom、left 和 right 属性的影响。

带有position: static; 的元素没有以任何特殊方式定位；总是按照页面的正常流程定位

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

.textFMT2 .arrowsForScroll {
    position: relative;
}

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

【讨论】：