CODEWITHSUNDEEP
htmlcssreactjsflexboxjsx
LAN_scape
LAN_scape

Reputation: 97

Equal height cards using Flexbox

Pretty simple problem. I have multiple cards representing my projects. I am trying to make them equal height, equal width, evenly spaced, and centered. I have everything except the equal height. Right now I am using only a few lines of CSS to get the job done. I have been messing around for a while and can not seem to get it right. I have been using flex-box. Thank you for taking the time to help me out.

problem

I am going to provide two of the six articles in my JSX and my CSS. Obviously the other 4 articles look the same as the 2 I provided. I am also using some imported classes due to react material 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 [email protected] 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>

Upvotes: 3

Views: 7964

Answers (1)

jignasha
jignasha

Reputation: 176

If you want equal heights card you can put display:flex in parent div which is above article element so all article sections will be equal heights.

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

Full example in snippet down 

div {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}

div article {
  width: 18%;
  padding: 15px;
}

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 [email protected] 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>

  <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 [email protected] 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>
  <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 [email protected] 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>

Upvotes: 3

Related Questions