Question

我试图使用flexbox制作旋转木马滑块。问题是我只需显示4个项目并阻止滚动，而.carousel占据全宽并显示滚动的所有项目。是否可以使用flexbox执行此操作？

.main - container {
  display: flex;
  flex - direction: row;
  overflow: hidden;
  min - width: 0;
}

.prev,
.next {
  flex: initial;
  width: 50 px;
}

.carousel {
  flex: 1;
}

<div class="main-container">
  <div class="prev"></div>
  <div class="carousel">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="nex"></div>
</div>

Answer 1

这可以通过对代码稍作修改来完成。我已将弹性增长属性添加到弹性行中的三个容器，并将overflow: scroll和white-space: nowrap添加到您的轮播，并将.item设置为display: inline-block;

＆＃13;

.main-container {
  display: flex;
  flex-direction: row;
  min-width: 0;
}

.prev,
.next {
  width: 50 px;
  flex-grow: 1;
  background-color: #fcfcfc;
}

.carousel {
  flex-grow: 2;
  background-color: #fbfbfb;
  overflow: scroll;
  white-space: nowrap;
}
  
.item {
  display: inline-block;
}

＆＃13;

<div class="main-container">
  <div class="prev">&laquo;</div>
  <div class="carousel">
    <div class="item"><img src="https://www.fillmurray.com/300/300"/></div>
    <div class="item"><img src="https://www.fillmurray.com/300/300"/></div>
    <div class="item"><img src="https://www.fillmurray.com/300/300"/></div>
    <div class="item"><img src="https://www.fillmurray.com/300/300"/></div>
    <div class="item"><img src="https://www.fillmurray.com/300/300"/></div>
    <div class="item"><img src="https://www.fillmurray.com/300/300"/></div>
    <div class="item"><img src="https://www.fillmurray.com/300/300"/></div>
  </div>
  <div class="nex">&raquo;</div>
</div>

＆＃13;

带有flexbox的旋转木马滑块，防止水平滚动

1 个答案: