CSS，Flexbox尺寸调整问题有人可以解释发生了什么吗？

编程问答 2022-08-12

问题描述

嗨，我正在尝试制作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;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

carouselflexboxnetflixreactjsreactjs