10

私は ReactJS でアプリを開発しており、MaterialUI (react 用) と React Flexbox を使用しています。

私が抱えている問題は、カードボタンを下に配置しようとすることです (さまざまなフレームワークでインターネットをスパムしたように見える問題)。ここからカードを使用しています -> https://material-ui.com/demos/cards/

align-items から align-self やさまざまな表示タイプまで、考えられるほとんどすべてを試しました。私は通常 Bootstrap を使用しているため、ここで何かが欠けている可能性があるため、CSS マスターが私を助けてくれることを願っています。参考までに下の写真を添付し​​ます。

ここに画像の説明を入力

また、refについては、コードが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 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;
}

portCardCl最初<Card>にportBodyCl進み、進み<CardActionArea>、最後にportButCl進みます<CardActions>

4

1 に答える 1