Css flexbox间距均匀,而不是间距均匀

Css flexbox间距均匀,而不是间距均匀,css,flexbox,css-position,Css,Flexbox,Css Position,我有下面的片段,我想知道为什么前三个元素之间的间距与第三个和第四个元素之间的间距不同 .textFMT2{ 显示器:flex; 弯曲方向:立柱; 对正内容:空间均匀; 对齐项目:居中; 高度:100vh; 字体大小:1.5vw; } .links4{ 宽度:100%; } .links4跨度{ 显示:块; 背景色:538231; 文本对齐:居中; 宽度:50%; 边界半径:10vw; 填充:1vw 0; 保证金:0自动; } 跨度{ 保证金:0; 填充:0; 边界:0; 字体大小:100%;

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

.textFMT2{ 显示器:flex; 弯曲方向:立柱; 对正内容:空间均匀; 对齐项目:居中; 高度:100vh; 字体大小:1.5vw; } .links4{ 宽度:100%; } .links4跨度{ 显示:块; 背景色:538231; 文本对齐:居中; 宽度:50%; 边界半径:10vw; 填充:1vw 0; 保证金:0自动; } 跨度{ 保证金:0; 填充:0; 边界:0; 字体大小:100%; 垂直对齐:基线; } .textFMT2.arrowsforcroll{ 位置:相对位置; } .阿罗弗斯克罗尔{ 位置:绝对位置; 底部:2vw; } .阿罗弗斯克罗尔{ 显示器:flex; 对正内容:空间均匀; 对齐项目:居中; 宽度:100%; } a、 左,右{ 文字装饰:无; 字体大小:粗体; 字体大小:32px; } .左,.右{ 显示:无; } .部分{ 背景色:b3d7f7; /*宽度:32vw*/ 颜色:538231; 字体大小:16px; 文本对齐:居中; 位置:相对位置; 身高:100%; } .Links4A{ 文字装饰:无; 颜色:白色; }
创建不同的间隙大小是因为您在此处将位置设置为相对:

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

设置相对定位图元的“上”、“右”、“下”和“左”属性将使其偏离其正常位置进行调整。其他内容将不会调整以适应元素留下的任何间隙

因此,您需要明确地将其设置为静态

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

具有位置的元素:静态;未以任何特殊方式定位;它总是按照页面的正常流程进行定位

编辑:整个问题源于将flex项设置为position:absolute in.arrowsForScroll,顺便说一下,它定义了两次,我假设您编写了选择器.textFMT2.arrowsForScroll来补偿这一点。因此,也可以通过完全移除这两个选择器来修复布局:

.textFMT2 .arrowsForScroll {
    position: relative;
}

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

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