Question

我正在尝试在react应用中创建3X3图像（这些是视频的图像模拟）图库。我正在使用sass和flexbox网格，并且在跨多种屏幕尺寸的CSS和响应性问题上遇到了一些麻烦：

这是在巨大的iMac屏幕（5120 x 2880）上的外观（应有的样子）

在大小正常的笔记本电脑屏幕上，它会变得混乱，甚至由于某些原因背景图像也会损坏：

我的目标是在最常见的屏幕尺寸上具有自适应3x3网格，在非常小的屏幕上降至2x3或1x2。在所有屏幕上，每张图像的尺寸必须具有相同的比例（如果图像必须调整大小以适合自己，页面的其余部分也应如此）。

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

感谢预先提供的帮助，根据记录，我对高级CSS，以前使用过的基本引导程序和帮助程序库不是很有经验，因此我主要是出于学习目的而尝试自己制作。

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

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

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

Dashboard.scss

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

Gallery.jsx

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

}

Gallery.scss

{{1}}

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%的简写。伸缩项的伸缩基础确定了起始宽度，由于我已经“关闭”了增长和缩小的基础，因此从此开始就可以用作宽度。

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

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

最后，我只是使用媒体查询来更改各种屏幕尺寸的项目的伸缩基础，以控制项目的数量。在全页模式下查看完整示例，并按屏幕尺寸播放。

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>

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

1 个答案: