在 div 中排列多个项目时面临项目宽度问题

【问题标题】：Facing item width issue while arranging multiple items in a div在 div 中排列多个项目时面临项目宽度问题
【发布时间】：2021-12-22 00:00:13
【问题描述】：

我必须展示一些物品卡片。每张卡都有min-width 属性。当我的屏幕尺寸改变时，卡片尺寸也改变了。正因为如此，我面临一个问题。也就是说，最后一项/多项占据整个区域。是否可以为每张卡片保留最小宽度，尽管它是否是最后一项？请帮忙。

问题：

尝试：

请在codeandbox中找到：https://codesandbox.io/s/multiple-items-arrange-926fx

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

听起来您还想为您的卡片指定max-width。在您的示例中，它可能只是：

const Container = styled.div`
  flex: 1;
  margin: 5px;
  max-width: 300px;
  min-width: 280px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5fbfd;
  position: relative;
  &:hover ${Info} {
    opacity: 1;
  }
`;

如果您根本不想更改元素的宽度，当然也可以留下max-width: 280px。

此外，您可以将justify-content: flex-start 添加到容器中，以使其在调整大小时看起来不那么奇怪。在您的示例中：

const Container = styled.div`
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
`;

【讨论】：