html - 使用 flex 时如何解决悬停问题

Question

当我将鼠标悬停在 href 上时，我使用 flex 而不是颜色更改为红色，但我使用的是 flex one div，但是当我设置 margin-bottom: 50px;在按钮上，但我也不知道 href 高度增加和悬停在标签之外我只想悬停在标签文本上而不是外侧部分我也只需要边距按钮。谢谢

.wrapper {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  max-width: 50%;
  text-align: center;
}
.flex-box {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
}
button {
  margin-right: 16px;
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
  margin-bottom: 50px;
}
a {
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
}
a:hover {
  color: red;
}

<div class="wrapper">
  <div class="flex-box">
    <button type="button">Login</button>
    <a href="#">Forget Password</a>
  </div>
</div>

Answer 1

调整flex-start的对齐方式，避免a标签被拉长:

.wrapper {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  max-width: 50%;
  text-align: center;
}
.flex-box {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
  align-items:flex-start; /*Added this*/
}
button {
  margin-right: 16px;
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
  margin-bottom: 50px;
}
a {
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
}
a:hover {
  color: red;
}

<div class="wrapper">
  <div class="flex-box">
    <button type="button">Login</button>
    <a href="#">Forget Password</a>
  </div>
</div>

您还可以将 margin-bottom:auto 添加到 a

.wrapper {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  max-width: 50%;
  text-align: center;
}
.flex-box {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
}
button {
  margin-right: 16px;
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
  margin-bottom: 50px;
}
a {
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
  margin-bottom:auto; /*Added this*/
}
a:hover {
  color: red;
}

<div class="wrapper">
  <div class="flex-box">
    <button type="button">Login</button>
    <a href="#">Forget Password</a>
  </div>
</div>