Блог

Привет, я пытаюсь создать клон netflix и заставить все работать так, как я хочу, но у меня проблема с макетом. Независимо от того, как я устанавливаю ширину div, который содержит изображения, они не меняются. Я использовал консоль, и, похоже, нет правила, которое препятствовало бы их росту. Я установил для изображений 100% ширину их родительского контейнера, но это делает их крошечными.

Я действительно борюсь с CSS, потому что нет консоли, сообщающей вам, что происходит не так. Если бы кто-нибудь мог взглянуть и помочь мне понять, я был бы очень признателен. (Кроме того, кто-нибудь знает, сколько времени требуется, чтобы перестать чувствовать себя идиотом при работе с CSS?)

Я включил код ниже. строка__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;
}
  

Ширина элементов Flex (дочерних элементов контейнера flex) определяется контейнером flex. Вам нужно управлять ими с помощью свойств flex. Посмотрите justify-content на контейнер и flex-grow , flex-shrink и flex-basis на элементы.

Например, если вы хотите, чтобы элементы имели определенную неизменяемую ширину, вы бы установили grow и shrink равными 0, а basis — желаемой ширине:

 .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 */
}
  

Если вам просто нужен ряд изображений с горизонтальной прокруткой, установите overflow: auto (или прокрутите) в контейнере flex и не позволяйте элементам сжиматься:

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