Flex容器中的锚标签破坏了我的布局

Question

我希望第二个块引用元素看起来像第一个，但具有可点击的名称和图片，因此我将它们包裹在锚标记中，它的行为不像我希望文本位于图像下方。使anchor标签成为flex容器可以解决我的问题，我只是不明白为什么会这样。

.review__user a {
 display: flex;
 align-items: center;
 margin-right: auto;
}  

演示在这里pen

Answer 1

.review__user, .review__user > a{
display: flex;
width:100%;
align-items: center;

}

尝试一下，它将解决您的问题。希望对您有所帮助。

Answer 2

尝试一下。希望对您有所帮助。

.review__user a {
  display: flex;
  align-items: center;
  align-content: center;
  flex: 1;
}