Question

我正在构建一个Carousel类型的组件，但是让它正常运行恰到好处。

我的基本方法是div（包装器），其中包含许多其他div（项）。我想在任何时候在转盘上显示4个项目。这些项目具有不同的内容高度，但项目的高度应相等（最大要求）。

我无法解决我需要的CSS组合才能使其正常工作。

使用this setup（帖子底部的HTML + CSS），每个width: 25%;上的item-container都会被忽略。

如果我向.item添加固定的，则25％会启动，但项目宽度未知 - 这取决于浏览器的大小。将其设置为1000px意味着您丢失了该项目的内容。将其设置为~210px有效，但是当您开始缩小浏览器时，会丢失内容。在大型浏览器上，您的间距过大。

奇怪的是，如果我将flex-wrap: wrap添加到CSS中，那么正确应用了25％的宽度 - 但我无法做到这一点，因为那时它不是旋转木马！ Example

场景很简单：应显示具有overflow: auto的div中未知数量的项目，这些项目的高度相等，其中4个子项在屏幕上任意一次。

我的HTML结构如下：

<div id="container">
  <div id="wrapper">
    <div class="item-container">
      <div class="item">
        <p>
          Carousel Item #1 with some quite long text.
        </p>
      </div>
    </div>
    <div class="item-container">
      <div class="item">
        <p>
          Carousel Item #2.
        </p>
      </div>
    </div>
    <div class="item-container">
      <div class="item">
        <p>
          Carousel Item #3.
        </p>
      </div>
    </div>
    ...
  </div>
</div>

我的CSS：

#container {
  width: 100%;
  background: #0f0;
  overflow: auto;
}

#wrapper {
  display: flex;
}

.item-container {
  border: 1px solid #f00;
  width: 25%;
}

注意，这是我的MCVE。在我的真实组件上，我有左右滚动的按钮，内容显然更复杂，就像那样。

Answer 1

您只需要将flex: 0 0 auto添加到.item-container个元素。

＆＃13;

* {
    box-sizing: border-box;
}

#container {
  width: 100%;
  background: #0f0;
  overflow: auto;
}

#wrapper {
  display: flex;
}

.item-container {
  border: 1px solid #f00;
  flex: 0 0 auto;
  width: 25%;
}

＆＃13;

<div id="container">
  <div id="wrapper">
    <div class="item-container">
      <div class="item">
        <p>
          Carousel Item #1 with some quite long text.
        </p>
      </div>
    </div>
    <div class="item-container">
      <div class="item">
        <p>
          Carousel Item #2.
        </p>
      </div>
    </div>
    <div class="item-container">
      <div class="item">
        <p>
          Carousel Item #3.
        </p>
      </div>
    </div>
    <div class="item-container">
      <div class="item">
        <p>
          Carousel Item #4.
        </p>
      </div>
    </div>
    <div class="item-container">
      <div class="item">
        <p>
          Carousel Item #5.
        </p>
      </div>
    </div>
    <div class="item-container">
      <div class="item">
        <p>
          Carousel Item #6.
        </p>
      </div>
    </div>
    <div class="item-container">
      <div class="item">
        <p>
          Carousel Item #7.
        </p>
      </div>
    </div>
  </div>
</div>

＆＃13;

具有固定宽度的非包装CSS Flex

1 个答案: