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

相关推荐
Cacciatore->7 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~9 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo10 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末29 分钟前
React——基础
前端·react.js·前端框架
每天开心33 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry40 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598241 小时前
使用three.js实现3D地球
前端·three.js
程序无bug1 小时前
Spring 面向切面编程AOP 详细讲解
java·前端