为什么材料组件卡标题对齐底部？答案

【问题标题】：why the Material components card title aligned to bottom?为什么材料组件卡标题对齐底部？
【发布时间】：2017-09-08 13:58:26
【问题描述】：

我正在制作一张带有 web 材质组件的卡片，我希望我的模板布局能够在其中包含所有数据。

现在当我使用 mdc-card__title 或 subtitle 时，它们都与我不想要的卡片底部对齐。

我做错了什么吗？

查看代码以获取帮助：

.demo-card{
	width:65%; max-height: 500px;
	position: absolute;
     margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
}

<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" href="main.css">
	<link rel="stylesheet"
      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body>
	<div class="mdc-card demo-card">
         <section class="mdc-card__primary">
            <h1 class="mdc-card__title mdc-card__title--large">Title goes here</h1>
            <h2 class="mdc-card__subtitle">Subtitle here</h2>
          </section>
          <section class="mdc-card__supporting-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat.
          </section>
	</div>
</body>
	
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>mdc.autoInit()</script>
</html>

为什么即使我没有添加任何媒体内容，它也会为媒体留出空间。

【问题讨论】：

标签： css material-design material-components

【解决方案1】：

这似乎是设计使然，根据docs：

如果内容小于卡片的高度，则内容将底部对齐。

如果您想将其更改为顶部对齐，则应该可以将 .mdc-card 的 justify-content 样式覆盖为 flex-start。

【讨论】：