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 会吸收左侧所有剩余空间,将元素推到容器最右侧。

相关推荐
CAD老兵4 分钟前
前端 Source Map 原理与结构详解
前端
gnip8 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长19 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_19 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe101021 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang21 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi22 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课25 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥26 分钟前
pixijs 的填充渲染错误,如何处理?
前端
snakeshe101027 分钟前
6-1. 实现 useState
前端