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 属性来控制它们。查看项目上的 justify-content on the container, and flex-grow, flex-shrink, and 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 */
}

如果您只想要 horizontally-scrolling 行图像，请在 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>

CSS，Flexbox 大小问题。有人可以解释这是怎么回事吗？

CSS, Flexbox sizing issue. Can someone please explain what is going on?

css

netflix

carousel

flexbox

reactjs