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>

我的想法是: slider是一个带有部分的容器，每次我浏览它时，我都会在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: scroll;
  /*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张宽度相等的卡片，并且这些卡片适合整个屏幕(编辑：“在部分和卡片中使用百分比”)，您可以设置

.slider {
  position: absolute;
  width: 100vw;
  display: flex;
  align-items: stretch;
  overflow: scroll;
  /*overflow: hidden;*/
}
    .section {
  width: 100%;
  min-width:100%;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.card {
  width: calc(100%/4);
  min-height: 200px;
  background-color: rgba(0,0,0, .2);
}

而不是100vw；

此外，如果您想隐藏滚动条，因为您计划通过使用javascript在X轴上转换内容来在卡片或部分之间移动，您可以设置：

body{
  overflow-x: hidden;
}

我希望它能对你有所帮助。