在底部材料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 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>