CSS，Flexbox 大小问题。有人可以解释发生了什么吗？

Question

您好，我正在尝试制作 netflix 克隆并让一切按我想要的方式运行，但我遇到了布局问题。无论我如何设置包含它们不会更改的图像的 div 的宽度。我使用了控制台，似乎没有任何规则可以阻止它们增长。我已将图像设置为其父容器宽度的 100%，但这会使它们变得很小。

我真的很纠结 CSS，因为没有控制台告诉你出了什么问题。如果有人可以看一下并帮助我理解，我将不胜感激。 （另外，有谁知道在处理 CSS 时需要多长时间才能停止感觉自己像个白痴？）

我在下面包含了代码。 row__imgLarge 仅应用于某一特定行。这与其他问题存在相同的问题。

<div className="row__images">
    {movies.map((movie) => (
      <div
        className={`row__imgContainer  ${
          isLargeRow ? "row__imgLarge" : ""
        }`}
        key={movie.id}
        onClick={() => handleClick(movie)}
      >
        <img
          className="row__image"
          // {some movies don't have the a backdrop image, in these cases use poster instead}
          src={`${base_url}/${
            isLargeRow || !movie.backdrop_path
              ? movie.poster_path
              : movie.backdrop_path
          }`}
          alt={movie?.title || movie?.name || movie?.original_name}
        />
      </div>
    ))}

.row__images {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 20px;
}

.row__imgContainer {
  /* width: 15.8vw; */
  max-height: 40vh;
  width: 150vw;
  margin-right: 0.6vw;
}

.row__image {
  width: 100%;
  transition: transfrom 440ms;
}

.row__imgLarge {
  max-height: 40vh;
}

Answer 1

Flex 项目（flex 容器的子项）的宽度由 flex 容器决定。您需要使用 flex 属性来控制它们。查看容器上的justify-content，以及项目上的flex-grow、flex-shrink 和flex-basis。

如果您希望项目具有特定不变的宽度，例如，您可以将增长和收缩设置为 0，并设置为所需的宽度：

.row_imgContainer {
  flex-grow: 0; /* don't grow */
  flex-shrink: 0; /* don't shrink */
  flex-basis: 200px; /* desired width */
}

.row_imgContainer {
  flex: 0 0 200px; /* shorthand, same as above */
}

如果您只想要水平滚动的一行图像，请在 flex 容器上设置 overflow: auto（或滚动）并且不要让项目缩小：

.container {
  display: flex;
  overflow-x: auto;
  max-width: 500px;
}

.container>* {
  flex: 0 0 200px;
}

<div class="container">
  <img src="//placekitten.com/200" />
  <img src="//placekitten.com/201" />
  <img src="//placekitten.com/200" />
  <img src="//placekitten.com/199" />
  <img src="//placekitten.com/200" />
  <img src="//placekitten.com/202" />
  <img src="//placekitten.com/204" />
</div>