Flex align center 导致 br 后 a 不工作？

Question

这个网格可以正常工作，除了当我将文本居中放在右侧时，br 停止工作，因此 a 结束在自己的行上...尽管没有链接或没有中心，它也可以正常工作。

我可以使用 p 或 div 围绕该文本集合的包装解决此问题，但也许是更好的方法？

抱歉无知。 谢谢。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.right {
  background-color: lightgray;
  display: flex;
  align-items: center;
}

.left {
  background-color: darkgray;
}

<div class=container>
  <div class="left">
    left<br>left<br>left<br>left
  </div>
  <div class="right">
    <a href="http://www.google.com">google</a><br>right<br>right
  </div>
</div>
&nbsp;
<div class=container>
  <div class="left">
    left<br>left<br>left<br>left
  </div>
  <div class="right">
    google<br>right<br>right
  </div>
</div>

Answer 1

重写您的代码，使其看起来像这样，使用<br> 不是分隔单独文本行的好方法

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.right {
  background-color: lightgray;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.left {
  background-color: darkgray;
}

/** This will remove the space between the p tags **/
p {
   margin: 0;
}

<div class=container>
  <div class="left">
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
  </div>
  <div class="right">
    <p><a href="http://www.google.com">google</a></p>
    <p>right</p>
    <p>right</p>
  </div>
</div>