在 div 中排列多个项目时遇到项目宽度问题

Question

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

问题：

尝试：

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

Answer 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;
`;

在 div 中排列多个项目时遇到项目宽度问题

Facing item width issue while arranging multiple items in a div

css

reactjs

styled-components