材质用户界面中的高度相同的卡片

Question

尝试拥有3张水平的卡片，但高度相同且反应灵敏。

喜欢

卡A | 卡B | 卡C

Answer 1

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

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

然而，为了更好地拉伸<CardContent>和<CardActions>垂直的额外效果，也设置display: 'flex', justifyContent: 'space-between', flexDirection: 'column'在<Card />元素上。

<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 2

我认为更简单的方法是：

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 3

您可以使用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"（实际上不需要指定，因为默认是拉伸），而在flex方向row（也是默认方向）时，将具有拉伸每个项目的高度的效果。您可以看到此答案以获取更多详细信息：https : //stackoverflow.com/a/46956430/253693

在xs各属性Grid item花费的优点自动布局，指示每张卡平均分配可用的宽度。

您还可以解决其他一些清理问题，即使用withStyles HOC对每个Card组件应用一个类来固定间距，并确保无论CardContent的高度如何，CardActions都位于卡片的底部。 ：

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 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