Non-wrapping CSS 固定宽度的 Flex

Question

我正在构建一个 Carousel-type 组件，但在使其工作时遇到了一些困难 恰到好处。

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

我无法计算出 CSS 组合，我需要让它正常工作。

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

如果我在 .item 中添加一个 fixed with，则 25% 开始生效，但项目宽度未知 -- 这取决于浏览器的大小。将其设置为 1000px 意味着您会丢失该项目的内容。将它设置为 ~210px 是可行的，但是当你开始缩小你的浏览器时，你会丢失内容。在大型浏览器上，间距过大。

奇怪的是，如果我将 flex-wrap: wrap 添加到 CSS，则会正确应用 25% 的宽度——但我不能那样做，因为那样它就不是轮播了！ Example

场景很简单： div 和 overflow: auto 中的未知数量的项目应显示为等高，并且屏幕上同时显示 children 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 个元素即可。

* {
    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%;
}

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

Non-wrapping CSS 固定宽度的 Flex

Non-wrapping CSS Flex with fixed widths

css

carousel

flexbox