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

Question

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

问题：

试图：

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

标签： cssreactjsstyled-components

Answer 1

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

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