我有一個非常簡單的問題。我想做一個從左到右的卡片列表。我的問題是，這張卡現(xiàn)在在中間，當(dāng)我添加另一張卡時，它會加在下面。我想讓它從左到右。

請查看這個codesandbox鏈接

點擊這里

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 * 3}px 0`
  },
  heading: {
    fontWeight: "bold"
  },
  subheading: {
    lineHeight: 1.8
  },
  avatar: {
    display: "inline-block",
    border: "2px solid white",
    "&:not(:first-of-type)": {
      marginLeft: theme.spacing.unit
    }
  }
}));

Material UI通過網(wǎng)格組件實現(xiàn)了一個非常可愛的網(wǎng)格。把你的牌包在一個& lt網(wǎng)格容器& gt像這樣:

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

更新的沙盒。