html - 带有 flexbox 的旋转木马 slider ，防止水平滚动

Question

我正在尝试使用 flexbox 制作旋转木马 slider 。问题是我只需要显示 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

这可以通过稍微修改您的代码来完成。我已经将 flex-grow 属性添加到 flex 行中的三个容器以及 overflow: scroll 和 white-space: nowrap 到你的轮播并设置你的 .item to display: inline-block;

.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;
}

<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>