I have been working on an app using ReactJS and incorporating MaterialUI (for React) along with React Flexbox.
One issue I've encountered is the struggle to position the card buttons at the bottom, which seems to be a common problem across different frameworks. The specific card component I am utilizing can be found here -> https://material-ui.com/demos/cards/
Despite trying various approaches such as align-items and align-self properties, as well as experimenting with different display types, I have not yet found a solution. Coming from a Bootstrap background, I suspect there might be something I'm overlooking. Thus, I am reaching out for assistance from a CSS expert. Please refer to the image below for context.
https://i.sstatic.net/ODcUM.png
Additionally, for reference, here is how my code appears in React (where ApiPosts represents my cards component):
<Grid container>
<Grid item xs={12}>
<Paper className={classes.paper}>
<Row className="rowSpacer">
<Col xs>
<Typography variant="title" align="center" color="textPrimary" gutterBottom>
Posts are listed below
</Typography>
</Col>
</Row>
<Divider />
<ApiPosts />
</Paper>
</Grid>
</Grid>
The layout consists of cards wrapped within '<Row around="xs">' (with 4 posts per row), and each card contained within a '<Col xs></Col>' element.
I appreciate any assistance offered!
Edit: Problem resolved thanks to Ivan's response. Below is the code snippet for anyone who may find it helpful (specifically aimed at Material-UI Cards).
.portCardCl {
display: flex;
flex-direction: column;
height:100%;
}
.portBodyCl {
display: flex;
flex: 1 0 auto;
align-items: flex-end;
justify-content: center;
flex-direction: column;
}
.portButCl{
display: flex;
justify-content: flex-start;
}
Apply 'portCardCl' to the first '<Card>', 'portBodyCl' to '<CardActionArea>', and 'portButCl' to '<CardActions>'.