当使用滚动捕捉和伸缩时，将CSS滑动条居中

Question

我试图创建一个基本的滑动条与3幻灯片。我们的想法是在初始视图上显示第二张幻灯片，如果用户向左滑动，滑块将显示第一张幻灯片，如果用户向右滑动，它将显示右边的幻灯片。

我有初始滑动条工作，但我不能居中。如果我在主包装器上使用了justify-content，我将无法滑动到第一张幻灯片。

下面是代码

body {
-webkit-overflow-scrolling: touch;
}

.wrapper {
scroll-snap-type: x mandatory;
scroll-padding: 0px;
scroll-padding-left: 0px;
display: flex;
overflow-x: scroll;
height: 400px;
width: 100vw;
/* justify-content: center; */
}
::-webkit-scrollbar {
display: none; 
}
.item {
scroll-snap-align: start;
scroll-snap-stop: always;
flex: 0 0 calc(100vw);
height: 400px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-transform: uppercase;
color: whitesmoke;

font-size: 64px;
}
.item-a {
background-color:green;
flex: 0 0 calc(150px);
}
.item-b {
background-color:red;
}
.item-c {
background-color:blue;
flex: 0 0 calc(150px);
}

<main>
<div class="wrapper">
<div id="item-a" class="item item-a">a</div>
<div id="item-b" class="item item-b">b</div>
<div id="item-c" class="item item-c">c</div>
</div>
</main>

Answer 1

justify-content: center;

justify-content: space-between;

我想应该对你的例子有效。以下是来自mozilla开发者网站

的解释