如何在 flex 布局中使 h1 和 h3 底部对齐？

Question

我希望H1和H3能够与文本底部对齐，但我无法实现。我已经创建了一个CodePen示例https://codepen.io/rickgove/pen/RwRvLyj。

<div class="flex-div">
  <h1>Title</h1>
  <h3>Description</h3>
</div>

.flex-div{
  background: black;
  color: dodgerblue;
  font-family: monospace;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  margin-right: 1rem;
}

- BobbyOrr4

---

你的意思是要将它们垂直对齐吗？ - Ozgur Sar

将“align-items: center”更改为“align-items: baseline”。 - Grégory C

@ozgur 我希望它们能够对齐，就像它们写在有线纸上一样。 - BobbyOrr4

所以，在你的情况下，align-items: baseline; 就足够了。 - Ozgur Sar

Answer 1

将样式更改为此内容，应该可以正常工作：

<style>
.flex-div{
  background: black;
  color: dodgerblue;
  font-family: monospace;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

h1 , h3 {
  margin-right: 1rem;
  margin-bottom:0px;

</style>

- Hanieh

Answer 2

这是因为在默认浏览器中，h1、h2和h3具有margin-bottom的值，所以将h1、h2和h3的margin-bottom设置为0像素，并将其align-self属性设置为flex-end，就可以解决问题。

h1,h2,h3{
 align-self:flex-end;
 margin-bottom:0px;
}

- Red Wing Justice Chan