css - 尝试创建响应式图片库，react+Sass+Flexbox

Question

我正在尝试在 React 应用程序中创建一个 3X3 图像(这些是视频的图像模拟)画廊。我正在使用 sass 和 flexbox 网格，我在跨多种屏幕尺寸的 CSS 和响应问题上遇到了一些麻烦:

这是它在巨大的 iMac 屏幕 (5120 x 2880) 上的样子(应该如此)

在正常大小的笔记本电脑屏幕上，它变得凌乱，甚至背景图像由于某种原因而损坏:

我的目标是在最常见的屏幕尺寸上采用响应式 3x3 网格，在非常小的屏幕上降至 2x3 或 1x2。对于所有屏幕，每张图片的大小必须采用相同的比例(如果图片必须自行调整大小以适合页面的其余部分)。

我使用了 create-react-app 和 Sass。我也可以访问 react-bootstrap 但我还没有使用它，试图用纯 flexbox 制作这个屏幕。我尝试用包装器 div 包装每个图像并对其制定特殊规则，但没有帮助。

提前感谢您的帮助，郑重声明，我对高级 css 不是很有经验，以前使用过基本的 Bootstrap 和帮助程序库，主要出于学习目的而尝试自己制作。

Dashboard.jsx

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

仪表板.scss

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

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

画廊.jsx

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

画廊.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;
}

在这里，我使用 display: flex 将 flexbox 布局应用于容器。 flex-wrap 规则允许元素流入多行。 justify-content: space-between 使元素紧靠容器的左右边缘。只要元素不占用所有可用的水平空间，这就会在元素之间提供垂直间距。

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

flex子元素得到这个flex规则，值是flex-grow: 0, flex-shrink: 0的简写，和 flex-basis: 31%。 flex 元素的 flex 基础建立了起始宽度，因为我已经“关闭”增长和收缩基础作为宽度。

您放入文档中的图像将尝试与这些 div 的大小作斗争，因此您需要指示图像服从其包装 div 的大小:

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

最后，我只是更改了各种屏幕尺寸的元素的 flex-basis，使用媒体查询来控制元素的数量。在全页模式下查看完整示例并调整屏幕大小。

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>