Flexbox容器内拉伸问题：如何将两个figure元素分别居中与居右？

看起来你混淆了Flexbox中align-self的作用——它是用来控制子项在垂直交叉轴上的对齐，而你需要的是水平主轴上的位置调整，所以用它肯定达不到预期效果。我给你两种可行的解决方案，都是基于Bootstrap和Flexbox的特性：

方案一：利用Flexbox的margin:auto特性（推荐） #

这是最符合Flex布局逻辑的方式，通过自动margin来分配剩余空间，让两个元素分别到达目标位置：

.container-fluid
  section#feeds_container
    section.row
      section.col-sm-12.d-flex
        figure#pagination_up.d-flex.justify-content-center.mx-auto
        figure#button_wrapper.d-flex.justify-content-end.ms-auto

• mx-auto 会让#pagination_up在父容器的水平方向自动居中，左右margin填充剩余空间
• ms-auto（Bootstrap 5+，旧版用ml-auto）会让#button_wrapper的左侧margin自动填充所有剩余空间，从而被推到容器最右侧

方案二：结合绝对定位（备用） #

如果Flex的margin方式因为特殊布局冲突不生效，可以用绝对定位来固定右侧元素：

.container-fluid
  section#feeds_container
    section.row
      section.col-sm-12.d-flex.position-relative
        figure#pagination_up.d-flex.justify-content-center.mx-auto
        figure#button_wrapper.d-flex.justify-content-end.position-absolute.right-0

• 给父容器加position-relative，确保绝对定位的子元素相对于它定位
• position-absolute.right-0 直接把#button_wrapper固定在容器的右侧边缘
• #pagination_up依然用mx-auto保持居中

这两种方式都能实现你要的「一个居中、一个靠右」的布局效果，优先推荐方案一，因为它不需要依赖定位，更符合Flexbox的布局规则。

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