卡片列表反应材料

Posted 2023-02-22

【中文标题】卡片列表反应材料

【英文标题】：Cards Lists React Material

【发布时间】：2020-10-14 07:16:29

【问题描述】：

我有一个非常简单的问题。我想从左到右制作一张卡片列表。我的问题是卡现在在中心，当我添加另一张卡时，它会在下面加起来。我希望它是从左到右的。

请查看此代码框链接

CLICK HERE

const useStyles = makeStyles(theme => (
  root: 
    display: "flex",
    justifyContent: "initial"
  ,
  title: 
    marginBottom: "30px"
  ,
  header: 
    marginBottom: "20px",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between"
  ,
  card: 
    maxWidth: 300,
    margin: "auto",
    transition: "0.3s",
    boxShadow: "0 8px 40px -12px rgba(0,0,0,0.3)",
    "&:hover": 
      boxShadow: "0 16px 70px -12.125px rgba(0,0,0,0.3)"
    
  ,
  media: 
    paddingTop: "56.25%"
  ,
  content: 
    textAlign: "left",
    padding: theme.spacing.unit * 3
  ,
  divider: 
    margin: `$theme.spacing.unit * 3px 0`
  ,
  heading: 
    fontWeight: "bold"
  ,
  subheading: 
    lineHeight: 1.8
  ,
  avatar: 
    display: "inline-block",
    border: "2px solid white",
    "&:not(:first-of-type)": 
      marginLeft: theme.spacing.unit
    
  
));

【参考方案1】：

Material UI 通过Grid 组件实现了一个非常漂亮的网格。只需将您的卡片包装在 <Grid container> 中，如下所示：

  <Grid container>
    <Card className=classes.card>
      ...
    </Card>
  </Grid>

Updated sandbox.

【讨论】：

如果只有两张卡怎么办？你能让第二个去左边吗？第一张和第二张卡之间有很大的空间。使其也与添加按钮对齐谢谢

卡号是静态的吗？是否始终只有两张卡，还是会有所不同？

会有所不同。卡片是动态的

这是由card 样式中的margin: "auto" 引起的。更重要的是，如果您希望卡片之间有填充，<Grid> 组件有一个您可以使用的 spacing 属性。我稍微更新了代码沙箱。 codesandbox.io/s/material-demo-777kw?file=/demo.js

太棒了！你能添加一张额外的卡片，让我看看它的样子吗？