css - 在底部 Material UI 上对齐卡片按钮

Question

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

我遇到的问题是试图将卡片按钮放在底部（这个问题似乎在不同的框架中向互联网发送了垃圾邮件）。我正在使用这里的卡-> https://material-ui.com/demos/cards/

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

同样对于参考，这是我的代码在反应中的外观（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 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>