css flex布局 让子元素在最右边技巧

//父元素css
.bottomPanel {
    bottom: 0; // 固定在底部
    position: fixed;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
}

本来父元素有两个子元素 A,B

他们是两端对齐的

但是A元素在某个条件会v-show=false，B元素就自动到左边来了

此时给B元素设置 动态class ------> float: right，不生效

因为此时 float: right 失效是正常现象，因为 Flex 容器会覆盖浮动行为

解决方式：

/* 要靠右的子元素 */
.child-right {
  margin-left: auto; /* 关键！将元素推到右侧 */
}

在 Flex 容器中，

为子元素设置 margin-left: auto 会吸收左侧所有剩余空间，将元素推到容器最右侧。