在底部材料UI上对齐卡片按钮

Question

我在ReactJS中开发一个应用程序，我在使用以下应用程序：MaterialUI（用于react）和React Flexbox。

我遇到的问题是尝试将卡按钮定位在底部（该问题似乎在不同的框架中散布了互联网）。 我正在从这里使用卡-> https://material-ui.com/demos/cards/

从align-items到align-self和不同的显示类型，我已经尝试了几乎所有我能想到的东西。 由于我通常与Bootstrap合作，因此我可能会在这里遗漏某些东西，因此希望CSS Master可以为我提供帮助。 我将在下面附上图片供参考。

另外作为参考，这是我的代码在react中的外观（ApiPosts是我的卡片组件）->

                    <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 below
                            </Typography>
                                    </Col>
                                </Row>
                                <Divider />
                                <ApiPosts />
                            </Paper>


                        </Grid>
                    </Grid>

最后，我的卡片被包裹在<Row around="xs"> （连续4个帖子），每张卡片都放在col <Col xs >

提前致谢！

编辑：感谢Ivan的回答，解决了这里的代码，以防万一需要它（在Material-UI卡上工作）。

.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;
}

portCardCl进入第一个<Card> ， portBodyCl进入<CardActionArea> ，最后portButCl进入<CardActions>

Answer 1

这是css-grid的示例。

 const { Button, createMuiTheme, CssBaseline, MuiThemeProvider, Typography, Paper, withStyles, } = window['material-ui']; const styles = theme => ({ root: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gridGap: "24px", }, card: { display: "grid", gridTemplateRows: "1fr auto", gridGap: "8px", minHeight: 280, backgroundImage: `url(https://via.placeholder.com/100x200)`, backgroundSize: "cover" }, body: { alignSelf: "end", textAlign: "center" }, actions: { display: "flex", justifyContent: "space-between" } }); const Grid = withStyles(styles)( class Grid extends React.Component { render () { const { classes } = this.props; const cards = [1, 2, 3, 4]; return ( <div className={classes.root}> {cards.map(c => ( <Paper key={c} className={classes.card}> <div className={classes.body}> <Typography variant="subheading"> Test Image </Typography> <Typography variant="caption"> Small help text </Typography> </div> <div className={classes.actions}> <Button>Left</Button> <Button color="primary">Right</Button> </div> </Paper> ))} </div> ) } } ) const theme = createMuiTheme(); ReactDOM.render(( <MuiThemeProvider theme={theme}> <Grid /> </MuiThemeProvider> ), document.querySelector("#root")) 

 <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script> <div id="root"></div> 

这是仅使用flex的卡片示例

 .card { padding: 24px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .13); background: skyblue; border-radius: 4px; font-family: "Helvetica", sans-serif; display: flex; flex-direction: column; height: 280px; width: 160px; } .card__body { display: flex; flex: 1 0 auto; align-items: flex-end; justify-content: center; } .card__actions { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; } 

 <div class="card"> <div class="card__body"> Test Text </div> <div class="card__actions"> <button>Left</button> <button>Right</button> </div> </div>