Swiper：当 parent 是 flex 时真的很奇怪的行为
Swiper: Really weird behaviour when parent is flex
今天我试用了这个滑块，发现如果滑块上方的元素是 flexbox，就会出现奇怪的行为。滑块不计入 max-width。
在 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 时，它确实适合给定的尺寸，尽管我不能再正确滑动了。
我也可以给上面的元素一个 max-width，但这感觉不对。这是一个错误还是我做错了什么？
这里还有 2 个屏幕截图：
访问网站时：
（来源：legilimens.de）
页面调整后：
（来源：legilimens.de）
属性 spaceBetween 是一个数字，而不是 8px 你可以只给出 8。溢出问题是因为 swiper 的容器是一个 flex item 并且默认大小与其内容一样多 - 所以你可以覆盖它使用 min-width: 0.
的行为
请参阅下面的完整演示和 updated codepen：
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;
}
<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>
PS：添加min-height: 0是为了覆盖默认min-height: auto为列方向的弹性项目 - 在此处阅读更多详细信息：
您可以看到此行为的一些示例：
今天我试用了这个滑块，发现如果滑块上方的元素是 flexbox，就会出现奇怪的行为。滑块不计入 max-width。 在 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 时，它确实适合给定的尺寸，尽管我不能再正确滑动了。
我也可以给上面的元素一个 max-width，但这感觉不对。这是一个错误还是我做错了什么？
这里还有 2 个屏幕截图：
访问网站时：
（来源：legilimens.de）
页面调整后：
（来源：legilimens.de）
属性 spaceBetween 是一个数字，而不是 8px 你可以只给出 8。溢出问题是因为 swiper 的容器是一个 flex item 并且默认大小与其内容一样多 - 所以你可以覆盖它使用 min-width: 0.
请参阅下面的完整演示和 updated codepen：
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;
}
<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>
PS：添加min-height: 0是为了覆盖默认min-height: auto为列方向的弹性项目 - 在此处阅读更多详细信息：
您可以看到此行为的一些示例：