Question

今天，我尝试了使用此滑块，并且发现如果滑块上方的元素是flexbox，则会出现怪异的行为。滑块不计入最大宽度。在codepen示例https://codepen.io/obendev/pen/wbzXEa中，我尝试过尽可能向您展示。

var swiper = new Swiper(".swiper-container", {
    // spaceBetween: "8px",
    loop: true
});

* {
  box-sizing: border-box;
  margin: 0;
  outline: none;
  padding: 0;
}

html {
  font-family: "Google Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

body {
  background: #fff;
}

.site-width {
  border: 2px solid #f44336;
  margin: 2rem auto;
  max-width: 80rem;
  padding: 3.125rem;
}

.c-text-slider {
  display: flex;
  justify-content: space-between;
}
.c-text-slider__text {
  border: 2px solid #f44336;
  max-width: 200px;
  padding: 0.5rem;
}
.c-text-slider__slider {
  border: 2px solid #f44336;
  padding: 0.5rem;
}
.c-text-slider__text + .c-text-slider__slider {
  margin-left: 0.5rem;
}

.myelement {
  border: 2px solid #f44336;
  padding: 0.5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="site-width">
    <div class="c-text-slider">
        <div class="c-text-slider__text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque.</p>
        </div>
        <div class="c-text-slider__slider">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide myelement">
                        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
                            Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
                    </div>

                    <div class="swiper-slide myelement">
                        <p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
                            Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
                    </div>

                    <div class="swiper-slide myelement">
                        <p>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
                            Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
                    </div>

                    <div class="swiper-slide myelement">
                        <p>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
                            Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

使用spaceBetween时，它确实适合给定的大小，尽管后来我无法正确滑动。

我也可以给上部元素一个最大宽度，但这感觉不对。这是错误还是我做错了什么？

这里还有2个屏幕截图：

访问网站时： screenshot2

页面调整大小后： screenshot1

Answer 1

属性spaceBetween是一个数字，您不必给出8px，而只能给出8。溢出问题是因为 swiper 的容器是 flex项，并且默认大小与其内容一样多-因此您可以使用{{1} }。

请参阅下面的完整演示和updated codepen：

min-width: 0

var swiper = new Swiper(".swiper-container", {
    spaceBetween: 8,
    loop: true
});

* {
  box-sizing: border-box;
  margin: 0;
  outline: none;
  padding: 0;
}

html {
  font-family: "Google Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

body {
  background: #fff;
}

.site-width {
  border: 2px solid #f44336;
  margin: 2rem auto;
  max-width: 80rem;
  padding: 3.125rem;
}

.c-text-slider {
  display: flex;
  justify-content: space-between;
}
.c-text-slider__text {
  border: 2px solid #f44336;
  max-width: 200px;
  padding: 0.5rem;
}
.c-text-slider__slider {
  border: 2px solid #f44336;
  padding: 0.5rem;
  min-width: 0;
}
.c-text-slider__text + .c-text-slider__slider {
  margin-left: 0.5rem;
}

.myelement {
  border: 2px solid #f44336;
  padding: 0.5rem;
}

PS ：添加<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/> <div class="site-width"> <div class="c-text-slider"> <div class="c-text-slider__text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque.</p> </div> <div class="c-text-slider__slider"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide myelement"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque. Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p> </div> <div class="swiper-slide myelement"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque. Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p> </div> <div class="swiper-slide myelement"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque. Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p> </div> <div class="swiper-slide myelement"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque. Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p> </div> </div> </div> </div> </div> </div>是为了 flex 在列方向上覆盖默认的min-height: 0 -阅读这里有更多详细信息：

Why don't flex items shrink past content size?

您可以看到此行为的一些示例：

刷牙：当父母是flex时，真的很奇怪

1 个答案: