嵌套Flexbox布局下follow按钮无法对齐到容器右侧问题

问题根源 #

当前布局失效是两个CSS规则缺失导致的：

• 父级flex容器.follow__content下的用户信息区块.heading-tag没有配置自动填充剩余空间的属性，按钮容器会直接紧跟在用户信息后方，不会被推到边缘
• 按钮容器.follow__tag设置的justify-content: flex-start仅会让内部链接靠自身左侧排列，没有右对齐逻辑

修复代码 #

仅需要调整CSS规则，无需修改现有HTML结构，修改后的完整CSS如下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

.follow__container {
  display: flex;
  justify-content: center;
}

.follow__container .follow__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  padding: 1rem;
  border-radius: 12px;
  margin-top: 1rem;
  width: 35rem;
  gap: 1rem;
}

.follow__content {
  position: relative;
}

.follow__content img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 25px;
}

.follow__content .heading-tag {
  flex: 1;
  color: #000000;
}

.heading-tag p:nth-child(2) {
  opacity: 0.5;
}

.heading-tag p:nth-child(3) {
  opacity: 0.4;
}

.follow__tag {
  display: flex;
  justify-content: flex-end;
}

效果说明 #

修改后布局逻辑：

• 头像固定尺寸居左
• 用户昵称、标签信息区块自动填充中间剩余宽度
• Follow按钮自动贴紧卡片最右侧，所有元素垂直居中对齐，间距统一

内容的提问来源于stack exchange，提问作者Kai