FlexBox垂直布局：如何让按钮宽度匹配标签并右对齐？

需求：用FlexBox实现按钮位于标签上方，整体在父元素中右对齐，且按钮宽度与标签一致。

HTML结构 #

<div class="container">
  <button id="print-button" title="print" type="button">🖨</button>
  <label for="print-button">Print Me!</label>
</div>

当前CSS代码 #

.container{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
button{
  appearance: none;
  font-size: 2rem;
  border: none;
  background-color: yellow;
}
label{
  font-family: sans-serif;
}

遇到的问题 #

当前代码实现了右对齐，但按钮宽度小于标签；若给容器设置width: fit-content并将align-items改为stretch，按钮与标签宽度匹配了，但容器默认左对齐。不想使用浮动、定位或语义冗余标签，已了解Grid方案，仅需确认能否用FlexBox实现。

FlexBox解决方案 #

可以实现，调整容器的CSS属性即可：

.container{
  display: flex;
  flex-direction: column;
  align-items: stretch; /* 让子元素拉伸至容器宽度 */
  width: fit-content; /* 容器宽度适配内容（标签的宽度） */
  margin-left: auto; /* 利用自动外边距将容器推至父元素右侧 */
}
button{
  appearance: none;
  font-size: 2rem;
  border: none;
  background-color: yellow;
}
label{
  font-family: sans-serif;
}

原理说明：

• width: fit-content让容器的宽度刚好容纳内部最宽的元素（也就是标签）
• align-items: stretch使按钮拉伸至容器的宽度，从而和标签保持同宽
• margin-left: auto是FlexBox的特性，会自动填充容器左侧的剩余空间，将容器整体推到父元素的右侧，实现右对齐

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