Flexbox（滑块）内部的Flexbox

Question

我想创建带有横断面的水平滑块。

<div class="slider">
  <div class="section">
    <div class="card">Section 1 Card 1</div>
    ...
  </div>
  <div class="section">
    <div class="card">Section 2 Card 1</div>
    ...
  </div>
  ...
</div>

我的想法：滑块是包含该部分的容器，每次浏览它时，我都会在x轴上转换内容。我的问题：我尝试过flexbox，但是部分和卡片重叠，不知道为什么。

也许您可以帮我吗？

Codepen：https://codepen.io/thor-ben/pen/XWJgeEo

Answer 1

我不知道即时消息是否正确理解您，但是如果您希望每个部分的每张卡的宽度为100vw，因此每张卡都适合整个屏幕长度，则可以使用此CSS：

.slider {
  position: absolute;
  width: auto;
  display: flex;
  align-items: stretch;
  justify-content:space-between;
  overflow: hidden;
}

.section {
  width: 100%;
  display: flex;
  align-items: stretch;
  overflow:hidden;
}

.card {
  width: 100vw;
  height:200px;
  background-color: rgba(0,0,0, .2);
}

但是，如果您希望每个部分都包含4张等宽的卡片，它们全部适合整个屏幕，则可以设置

.card {
      width: 25vw;
      height:200px;
      background-color: rgba(0,0,0, .2);
    }

而不是100vw;

此外，如果您要隐藏滚动条，因为您打算通过使用javascript在X轴上平移内容来在卡片或部分之间移动，则可以设置：

body{
  overflow-x: hidden;
}

我希望它会有所帮助。