材质 UI 中的相同高度卡片

Question

尝试使用 3 张水平卡片，但高度相同，并且反应灵敏。

喜欢

卡 A |卡 B |卡C

Answer 1

您可以使用 Grid 组件来实现：

<Grid container alignItems="stretch">

  <Grid item component={Card} xs>
    <CardContent>
       // Card A content
    </CardContent>
    <CardActions>
      // Card A actions
    </CardActions>
  </Grid>

  <Grid item component={Card} xs>
    <CardContent>
      // Card B content
    </CardContent>
    <CardActions>
      // Card B actions
    </CardActions>
  </Grid>

  <Grid item component={Card} xs>
    <CardContent>
      // Card B content
    </CardContent>
    <CardActions>
      // Card B actions
    </CardActions>
  </Grid>
</Grid>

alignItems="stretch"（实际上不需要指定，因为stretch是默认的）当flex方向为row（也是默认方向）时会产生拉伸每个item高度的效果.您可以查看此答案以获取更多详细信息：https://stackoverflow.com/a/46956430/253693

每个Grid item 上的xs 属性利用auto-layout，指示每张卡平均共享可用宽度。

还有一些您可以解决的清理项目，即使用withStyles HOC 为每个固定间距的 Card 组件应用一个类，并确保 CardActions 保持在卡片的底部，而不管CardContent 的高度：

const styles = {
  card: {
    // Provide some spacing between cards
    margin: 16,

    // Use flex layout with column direction for components in the card
    // (CardContent and CardActions)
    display: "flex",
    flexDirection: "column",

    // Justify the content so that CardContent will always be at the top of the card,
    // and CardActions will be at the bottom
    justifyContent: "space-between"
  }
};

然后您可以像这样将这些样式应用于每张卡片：

<Grid item component={Card} xs className={classes.card}>

这是一个将所有内容组合在一起的工作示例：https://codesandbox.io/embed/r9y95vr5n

Answer 2

按照上面的答案中的建议，用<Card> 覆盖<Grid item /> 的渲染组件会弄乱间距（<Grid container /> 的spacing 属性停止工作）。请参阅下面我的解释，了解如何实现卡片的垂直对齐而不会产生不必要的副作用。

在<Grid item /> 上设置display: 'flex' 应该足以对齐所有<Card /> 元素的高度。

但是，要获得很好地垂直拉伸 <CardContent> 和 <CardActions> 的额外效果，还要在 <Card /> 元素上设置 display: 'flex', justifyContent: 'space-between', flexDirection: 'column'。

<Grid container alignItems="stretch">
  <Grid item style={{display: 'flex'}}>
    <Card style={{display: 'flex', justifyContent: 'space-between', flexDirection: 'column'}}>
      // contents of your Card
    <Card/>
  </Grid>
  <Grid item style={{display: 'flex'}}>
    <Card style={{display: 'flex', justifyContent: 'space-between', flexDirection: 'column'}}>
      // contents of your Card
    <Card/>
  </Grid>
</Grid>

Answer 3

我认为这是一种更简单的方法：

https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/45#issuecomment-442885173

import React from "react"
import { Card, CardBody, CardFooter } from "components"

import withStyles from "@material-ui/core/styles/withStyles"

const styles = {
fullHeightCard: {
    height: "100%",
    },
}

const Item = (props) => {
    const {classes} = props

    // 1-5 paragraphs to create card height variance
    let paragraphs = 1 + Math.floor(Math.random() * Math.floor(5))

    return (
        <Card className={classes.fullHeightCard}>
            <CardBody>
                {Array(paragraphs).fill().map((_,i) => (
                    <p>{i+1}</p>
                ))}
            </CardBody>
            <CardFooter>
            {'Footer content'}
            </CardFooter>
        </Card>
    )
}

export default withStyles(styles)(Item)

Answer 4

您必须将以下属性添加到您的Card

.MuiCard-root.same-height {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

它会在CardContent和CardActions之间添加必要的空格

这里回答了同样的问题：How to make Material-UI CardActions always stick to the bottom of parent

Answer 5

我使用了一个更简单的解决方案：在父网格上设置 display: grid。

<Grid container style={{ display: 'grid' }}>
  <Grid item>
    <Card>
      // contents of your Card
    <Card />
  </Grid>
  <Grid item>
    <Card>
      // contents of your Card
    <Card />
  </Grid>
</Grid>