具有 React 和样式化组件的响应式图像 flexbox答案

【问题标题】：Responsive image flexbox with React and styled components具有 React 和样式化组件的响应式图像 flexbox
【发布时间】：2022-11-13 13:42:34
【问题描述】：

我是一个完整的初学者，已经迫切需要解决方案。我知道这是基本的东西，但我已经学习了很多教程，尝试过网格模板，基本上尝试了一切。现在这一切都在我的脑海中混在一起，我将不胜感激任何帮助。

我在一个 flexbox 中有六个图像，它们是计数器。它们是 styled.divs，包含一个 styled.img、styled.p 和另一个包装 React CountUp 的 styled.div。一切都包含在一个 styled.div 中，带有 display: flex。我有六个 ImgWraps 和六个 p 标签，因为上面会有不同的数字和文本 - 这是使其可调整的唯一方法（我认为）。

我也有按钮，但它们不是这里的问题（至少现在是这样）。

这是我想要实现的目标：

Responsive, shrunk flexbox

Full-size flexbox

这就是我所拥有的：

Div's flipping out of the containter

Huge row gap between

一些图像超出了容器以及 p 标签。

全尺寸网格几乎符合预期。行间距太大，不知道是什么原因。我不需要将图像“粘”在一起，我希望它们之间有一个小间隙。我也尝试过将图像上的文本居中，但除了我现在使用的解决方案之外没有任何效果。此外，文本的长度和数字也会不同，所以我不确定如何自动执行此操作。

AboutWrapper（主容器）代码：

export const AboutWrapper = styled.div`
display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 20 auto;
  object-fit: cover;
  align-content: space-evenly;
  z-index: 1;
  height: 770px;
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 24px;
  row-gap: 0;
  justify-content: center; 
`;

Img1Wrap（六个之一）：

export const Img1Wrap = styled.div`
  max-width: 343px;
  justify-self: center;
  align-self: center;
  justify-content: center;
  text-align: center;
  align-content: center;
  position: relative;
  height: 30%;
`;

ImgDesc，ImgWrap div 上的 p 标签。

export const Img1Desc = styled.p`
  font-size: 18px;
  position: absolute;
  height: 100%;
  color: yellow;
  z-index: 4;
  top: 50%;
  left: 30%;
`;

和 styled.img：

export const Img1 = styled.img`
  width: 90%;
  z-index: -1;
  align-self: center;
  justify-self: center;
  margin: 0 0 5px 0;
  padding-right: 0;
`;

【问题讨论】：

标签： css reactjs flexbox styled-components

【解决方案1】：

这只是获得该网格项目的相同分布所需的基本样式：

<body id='root'>
  <div class='flex-box'>
    <div class="templatecontent" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">   
    </div>
    <div class="templatecontent" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">   
    </div>
    <div class="templatecontent" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">   
    </div>
    <div class="templatecontent stat bg-image" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">   
    </div>
    <div class="templatecontent stat bg-image" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">   
    </div>
  </div>
</body>

和CSS：

#root {
  height: 100vh;
  width: 100vw;
}

.flex-box {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}

.templatecontent {
  flex-basis: 33%;
  flex-grow: 1;
  background-position: center;
  background-size: cover;
}

@media (max-width: 600px) {
  .templatecontent {
    flex-basis: 100%;
  }
}

Code example

【讨论】：

谢谢！我已经尝试修改我的代码，但是当我调整窗口大小时它仍然溢出到其他容器。原因可能在其他地方。 :-(
@kwi，很抱歉我的代码没有帮助。我刚刚尝试了您的代码，问题是 AboutWrapper 中的高度属性。只需删除它，该部分应该尊重他们的界限。 Code Example
对，就是这样！这是所有的静态高度值，我终于意识到......谢谢！