Question

非常简单的问题。我有多张代表我的项目的卡片。我试图使它们相等的高度，相等的宽度，均匀分布和居中。除了相等的高度，我拥有一切。现在，我仅使用几行CSS来完成工作。我已经摆弄了一段时间，似乎无法解决问题。我一直在使用flex-box。谢谢您抽出宝贵的时间来帮助我。

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

problem

我将在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/

使用Flexbox的等高卡

1 个答案: