使用 Flexbox 的等高卡片

Question

很简单的问题。我有多张卡片代表我的项目。我试图使它们等高、等宽、均匀间隔和居中。除了等高，我什么都有。现在我只使用几行 CSS 来完成工作。我已经搞砸了一段时间，似乎无法正确处理。我一直在使用 flex-box。感谢您抽出宝贵时间帮助我。

免责声明：我知道这可能是一个简单的问题，我是一名大三学生。

我将在我的 JSX 和我的 CSS 中提供六篇文章中的两篇。显然，其他 4 篇文章看起来与我提供的 2 篇相同。由于反应材料 ui，我还使用了一些导入的类。

div {
  text-align: center;
}

article {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  display: inline-flex;
  justify-content: space-evenly;
  align-items: stretch;
  margin: 20px;
  flex-grow: 1;
}

<div>
  <article>
    <Card className={classes.card}>
      <CardActionArea>
        <CardMedia component="img" alt="Workflow Project" height="140" image={WorkFlow} title="Workflow Project" />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Work Flow
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            A full stack web application. The front end uses React, Redux, and React Router. The backend uses Firebase. The web application is a way for multiple people to post projects to be seen by all users. It is complete with login/signup, authentication, cloud
            functions, storing all data in a database, and live notifications. It is super Mario themed.
          </Typography>
          <br />
          <Typography variant="body2" color="textSecondary" component="p">
            When visiting the site use the credentials mario@test.com and test1234 to login. Or feel free to make an account.
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <a href="https://work-flow-web-app.firebaseapp.com/" target="_blank" rel="noopener noreferrer">
          <Button size="small" color="primary">
                                Visit Site
                            </Button>
        </a>
        <a href="https://github.com/Amalazing/Work-Flow" target="_blank" rel="noopener noreferrer">
          <Button size="small" color="primary">
                                Visit Code
                            </Button>
        </a>
      </CardActions>
    </Card>
  </article>

  <article>
    <Card className={classes.card}>
      <CardActionArea>
        <CardMedia component="img" alt="Excersise Tracker" height="140" image={MERN} title="Excersise Tracker" />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Exercise Tracker
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            This project is a web application that allows multiple people to track and compare exercises. I wrote this project using the MERN stack. I used React for the front end and Node (with Express), MongoDB (Atlas) on the back end. React interacts with the
            Node API using Axios HTTP requests.
          </Typography>
          <br />
          <Typography variant="body2" color="textSecondary" component="p">
            By visiting the video you will be sent to a vimeo page where you can view the project in action!
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <a href="https://vimeo.com/355889426" target="_blank" rel="noopener noreferrer">
          <Button size="small" color="primary">
                                Visit Video
                            </Button>
        </a>
        <a href="https://github.com/Amalazing/MERN-Exercise-Tracker" target="_blank" rel="noopener noreferrer">
          <Button size="small" color="primary">
                                Visit Code
                            </Button>
        </a>
      </CardActions>
    </Card>
  </article>

Answer 1

如果你想要等高的卡片，你可以把 display:flex 放在父 div 它位于文章元素上方，因此所有文章部分的高度都相同。

div{
    text-align:center;
    display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    -ms-flex-wrap:wrap;
        flex-wrap:wrap;
}

例如，请参考以下链接， https://jsfiddle.net/jignashagpatel/L54zpeku/2/