材料UI中的相同高度卡片

Question

尝试使用三个水平卡片，但高度相同且具有响应性。类似于：

卡片A | 卡片B | 卡片C

- Panayiotis Georgiou

Answer 1

如上方答案所建议的，使用<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>

- Alex Yursha

---

看起来这种方法也会破坏 xs={6} 或类似于 Grid item 的设置。 - Stafford Williams

虽然在 Card 上使用 width: 100% 可以解决这个问题。 - Stafford Williams

这个与@StaffordWilliams的评论一样，按预期工作。 - 7hibault

这在高度方面的效果符合预期。然而，我注意到卡片的宽度不再是完整网格宽度。有什么想法为什么会这样？ - dipan66

Answer 2

您可以使用 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"（你实际上不需要指定，因为拉伸是默认值），会在弹性布局方向为row时（这也是默认方向）使每个项目的高度被拉伸。你可以查看此答案以获取更多详细信息：https://dev59.com/DVYN5IYBdhLWcg3wwKdZ#46956430

每个Grid item 上的 xs 属性利用了自动布局，指示每个卡片均等地共享可用宽度。

您还可以解决一些其他的清理项，即使用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

- Andrew Keller

---

我想使用 xs={whatever} 控制每个网格项的宽度。但是当我这样做时，由于边距的存在，项目不会在整行上展开（例如，具有 xs={6} 的 2 个网格项将显示在两个不同的行上）。如果我删除边距，则卡片会彼此接触。通常我使用网格容器中的 spacing 属性来管理此问题，但它没有改变任何东西。您如何适应手动布局？ - 7hibault

@7hibault，我遇到了同样的问题。不幸的是，用<Card>覆盖<Grid item />的渲染组件会像你注意到的那样搞乱间距。请参见下面的答案，了解如何在没有副作用的情况下实现卡片的垂直对齐。 - Alex Yursha

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)

- Rodrigo Cipriani da Rosa

Answer 4

你需要将以下属性添加到你的 Card。

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

这将会在CardContent和CardActions之间增加必要的空间。

同样的问题可以在这里找到答案：如何使Material-UI CardActions始终粘着父元素底部

- DarkAngel

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>

- canac

---

非常完美，感谢分享 :) - Panayiotis Georgiou

Answer 6

这是一个简洁的解决方案。

<Card sx={{height: 100%}}>

- Charlie Liu