滚动填充属性不会阻止元素接触 flex 容器边缘的边缘答案

【问题标题】：Scroll-padding property not stopping elements from touching the edge of the flex container edge滚动填充属性不会阻止元素接触 flex 容器边缘的边缘
【发布时间】：2020-11-08 08:59:13
【问题描述】：

这是我的第一个问题。 StackOverflow 帮助了我很多。问题：由于某种原因，当我在父 flex 容器上设置滚动填充属性时，幻灯片元素不会停止接触边缘。我已经尝试了很多方法来做到这一点，但没有。所以我决定来到帮助我解决其他问题的平台。在代码中进行了一堆更改之后，我最终得到了这个。一个@mixin，它接收用于配置滑块及其幻灯片的数据。滚动行为或向前和向后的幻灯片存在一些不一致，它们不适合可见区域。这个@mixin 是@included 在我的主css 文件中，以便在样式化的html 中可以看到这些类。谢谢

@mixin slider_s1(
  $slide_width: 700px,
  $slide_height: 500px,
  $slider_background_color: grey,
  $size_propagation_percentage: 1.03
  ){

  ///Element that hold all the elements necessary for the slide element(carousel)
  .slider-wrap{
    width: ($slide_width*$size_propagation_percentage)*$size_propagation_percentage;
    height: ($slide_height*$size_propagation_percentage)*$size_propagation_percentage;

    display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;

    border: yellow solid;
  }
  .slider_s1{
    width: ($slide_width*$size_propagation_percentage);
    height: ($slide_height*$size_propagation_percentage);

    border: solid red;
    overflow-x: hidden;

    //Flexbox Layout module
    display: flex;
    flex-direction: row;

    //Scroll Snap module
    scroll-snap-type: x mandatory;
    scroll-snap-align: start;

    .slide_s1{
      width:$slide_width;
      height:$slide_height;
      border:black solid;
      margin: auto (($slide_width*$size_propagation_percentage)-$slide_width)/2;

      //Flexbox Laytout module
      flex-shrink: 0;
      flex-grow: 0;
    }
  }
}

<html>
<header>
  <link rel="stylesheet" href="_css/slider.css">
</header>
<body>
<div class="slider-wrap">
  <div class="indicators-wrap">
    <div class="indicators">
      <a href="#slide-1">1</a>
      <a href="#slide-2">2</a>
      <a href="#slide-3">3</a>
      <a href="#slide-4">4</a>
      <a href="#slide-5">5</a>
    </div>
  </div>
  <div class="slider_s1">
    <div class="slide_s1" id="slide-1">Slide Data 1</div>
    <div class="slide_s1" id="slide-2">Slide Data 2</div>
    <div class="slide_s1" id="slide-3">Slide Data 3</div>
    <div class="slide_s1" id="slide-4">Slide Data 4</div>
    <div class="slide_s1" id="slide-5">Slide Data 5</div>
  </div>
</div>
</body>
</html>

【问题讨论】：

标签： html css web sass

【解决方案1】：

我找到了解决方案。我忘了用 align-items:center 弹性容器中的属性。现在我做到了，并且项目居中。

【讨论】：