如何让设置了display:flex属性的按钮实现靠右对齐

解决方案 #

你设置的两个属性未生效是因为适用场景不匹配：

• text-align: right 仅作用于块级容器内部的行内内容，对flex容器本身或flex布局下的元素对齐不生效
• align-content: right 仅在flex容器的交叉轴存在多条轴线（比如设置了flex-wrap: wrap且内容溢出产生多行）时才会生效，你的场景不满足触发条件

以下两种常见对齐需求的实现方案，都可以保留按钮的display: flex属性：

需求1：按钮内部的文字靠右对齐 #

给按钮的CSS添加justify-content: flex-end即可，修改后代码如下：

#hideShow {
  display: flex;
  justify-content: flex-end;
  /* 可选补充：如果需要文字同时垂直居中，可添加 align-items: center */
}

需求2：整个按钮在父容器（如页面body）中靠右对齐 #

两种实现方式可选：

1. 给按钮的父容器设置flex布局+右对齐属性：

body {
  display: flex;
  justify-content: flex-end;
}
#hideShow {
  display: flex;
  /* 原有其他样式保留即可 */
}

2. 无需修改父容器，直接给按钮添加左外边距自动属性：

#hideShow {
  display: flex;
  margin-left: auto;
}

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