Пытаясь создать адаптивную галерею изображений, реагируйте + Sass + Flexbox

Question

Я пытаюсь создать галерею изображений 3X3 (это макеты видео) в приложении реагирования. Я использую сетку sass и flexbox, и у меня возникают некоторые проблемы с CSS и отзывчивостью на экранах нескольких размеров:

вот как это выглядит (как и должно быть) на огромном экране iMac (5120 x 2880)

И на экране ноутбука нормального размера он становится грязным, и даже фоновое изображение по какой-то причине ломается:

Моя цель - создать адаптивную сетку 3х3 на самых распространенных экранах, уменьшив ее до 2х3 или 1х2 на очень маленьких экранах. размер каждого изображения должен быть одинаковым для всех экранов (если размер изображения должен соответствовать самому размеру, то же относится и к остальной части страницы).

Я использовал create-react-app и Sass. У меня также есть доступ к react-bootstrap, но я еще не использовал его, пытаясь сделать этот экран с чистым flexbox. Я пытался обернуть каждое изображение div-оберткой и установить для него особые правила, но это не помогло.

Спасибо за помощь заранее, для протокола, я не очень разбираюсь в продвинутых css, ранее использовал базовые библиотеки начальной загрузки и вспомогательные библиотеки, пытаясь сделать это самостоятельно, в основном для целей обучения.

Dashboard.jsx

<div className="dashboard-page-wrapper">
      <div className="page-content-wrapper">
         <Gallery videosAmount = {6} videoUrl = {video}/>
      </div>   
</div>

Dashboard.scss

.dashboard-page-wrapper {
    background-image: url("../../assets/map_bg.png");
    height: 100vh;
    background-size: cover;

    .page-content-wrapper {
        width: calc(100% - 290px);
    }
}

Gallery.jsx

 <div className="video-gallery-wrapper">         
      <ImageGallery videosAmount={videosAmount} videoUrl= {videoUrl} />
 </div>

Gallery.scss

.video-gallery-wrapper {
    min-height: 400px;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: auto;
    align-content: center;
    padding: 50px;

    &:after {
        display: block;
        flex: 999 999 auto;
    }

    .image-wrapper {
        img {
            flex: 0 0 auto;
            margin: 20px 10px 20px 20px;
            height: 305px;
            width: 479px;
        }
    }

}

Answer 1

Макет Flexbox требует, чтобы ваша HTML-разметка имела определенную структуру.Поскольку вы предоставили готовый код, я создал сопоставимый пример, который, я надеюсь, поможет.

Единственное место, в котором вам нужны какие-либо правила flexbox, - это контейнер flex и дочерние элементы flex, которые должны быть прямыми дочерними элементами контейнера flex..

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

Здесь я применяю макет flexbox к контейнеру с display: flex.Правило flex-wrap позволяет элементам перемещаться в несколько строк.И justify-content: space-between заставляет предметы сидеть напротив левого и правого краев контейнера.Это обеспечивает вертикальный водосточный желоб между элементами, если они не занимают все доступное горизонтальное пространство.

.video-item {
  flex: 0 0 31%;
}

Гибкие дочерние элементы получают это правило flex, значение сокращенно для flex-grow: 0,flex-shrink: 0 и flex-basis: 31%.Гибкая основа гибких элементов задает начальную ширину, и, поскольку я "выключил", расту и уменьшу основание с этого момента служит шириной.

Изображения, которые вы вставляете в документ, будут пытаться бороться сразмер этих div'ов, поэтому вам нужно указать, чтобы изображения соответствовали размеру их div-оболочки:

.video-wrap img {
  width: 100%;
  height: auto;
}

Наконец, я просто изменяю flex-base элементов на экранах разных размеров, используя медиазапросы, чтобы контролировать количество предметов в поперечнике.Ознакомьтесь с полным примером в режиме полной страницы и играйте с размером экрана.

body {
  background: #ccc;
  margin: 0;
  padding: 20px;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.video-item {
  flex: 0 0 31%; /* tweak the thrid value to adjust the vertical gutters */
  background: #fff;
  margin-bottom: 20px;
}
.video-wrap img {
  width: 100%;
  height: auto;
}
.text-wrap {
  text-align: center;
  padding: 10px;
}
@media (max-width: 640px) {
  .video-item {
    flex: 0 0 48%; /* 2 across */
  }
}
@media (max-width: 480px) {
  .video-item {
    flex: 0 0 100%; /* 1 accross */
  }
}

<div class="wrapper">         
  <div class="video-item">
    <div class="video-wrap">
      <img src="https://picsum.photos/270/180" />
    </div>
    <div class="text-wrap">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
  <div class="video-item">
    <div class="video-wrap">
      <img src="https://picsum.photos/270/180" />
    </div>
    <div class="text-wrap">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
  <div class="video-item">
    <div class="video-wrap">
      <img src="https://picsum.photos/270/180" />
    </div>
    <div class="text-wrap">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
  <div class="video-item">
    <div class="video-wrap">
      <img src="https://picsum.photos/270/180" />
    </div>
    <div class="text-wrap">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
  <div class="video-item">
    <div class="video-wrap">
      <img src="https://picsum.photos/270/180" />
    </div>
    <div class="text-wrap">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
  <div class="video-item">
    <div class="video-wrap">
      <img src="https://picsum.photos/270/180" />
    </div>
    <div class="text-wrap">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>