HTML中如何将元素靠右？flex布局下toggle按钮右对齐失效如何解决

失效原因排查 #

• float属性失效：父元素.main-container-top使用了flex布局，flex布局下子元素的float、clear、vertical-align属性会默认失效，因此设置float: right没有效果。
• right: 0属性失效：right定位属性仅在元素设置了非static的position属性（relative/absolute/fixed/sticky）时才会生效，你没有给toggle元素配置定位规则，因此不生效。
• align-self属性失效：flex布局中align-self用于控制子元素在交叉轴的对齐方式，你父容器主轴默认是水平row方向，交叉轴为垂直方向，align-self仅能调整上下对齐，无法控制水平位置，因此不生效。

可行解决方案 #

方案1：使用margin-left:auto快速靠右（最简便） #

flex布局下给子元素设置margin-left: auto会自动将所有剩余水平空间分配到元素左侧，直接实现靠右对齐，如果你需要让toggle内部的按钮也靠右，可以额外加flex对齐规则：

.toggle{
    width: 33%;
    margin-left: auto;
    /* 如需内部按钮也靠右，添加以下两行 */
    display: flex;
    justify-content: flex-end;
}

方案2：统一子元素宽度+父容器两端对齐 #

给搜索框也设置33%宽度，父容器添加justify-content: space-between实现三个元素等宽分散对齐：

.main-container-top{
    display: flex;
    justify-content: space-between;
    align-items: center; /* 额外设置垂直居中，优化视觉效果 */
}
.search{
    width: 33%;
}
.currs-available{
    width: 33%;
    font-size: 20px;
    font-weight: 700;
    padding: 9px 0 0 20px;
}
.toggle{
    width: 33%;
    display: flex;
    justify-content: flex-end;
}

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