flex布局实战之自动填充剩余

案例目标

文字部分自适应并且居中

在这里插入图片描述

图中是一个弹窗,我现在使用flex的布局来实现,标题和关闭按钮。因为是uni-app,所以标签是view 。你可以自行替换为

代码

<view class="popup-box"><view class="title"><view class="text">报案成功</view><image style="width: 32rpx;" mode="widthFix" src="close-icon.png"></image> </view> 
</view>
.popup-box{width: 80vw;margin: 0 auto;.title{display: flex;justify-content: space-between;align-items: center;.text{text-align: center;flex: auto;}}
}

实现效果如下:

在这里插入图片描述

总结

这里的title 文字部分是自适应剩余宽度的。想要自适应剩余宽度的话,需要满足以下条件:

  • 父级dispalay : flex;
  • 其中一个子级的宽度或者高度为固定。
  • 另外一个子级的 flex: auto;

案例二:子级宽度超过父级

<!DOCTYPE html>
<html>
<head><style>.parent {display: flex;flex-direction: row;width: 500px; /* 可以根据需要设置父级div的宽度 */height: 200px;background-color: lightgray;}.child1 {width: 100px;flex-shrink: 0;/*防止第二个子div的内容超出了父级div的宽度,其在空间不足时缩小*/background-color: red;}.child2 {flex-grow: 1;background-color: blue;}</style>
</head>
<body><div class="parent"><div class="child1"></div><div class="child2">很多汉字》很多汉字》很多汉字》很多汉字》很多汉字》很多汉字》很多汉字》很多汉字》很多汉字》很多汉字》很多汉字》很多汉字》很多汉字》</div></div>
</body>
</html>

当第二个子div的内容超出了父级div的宽度时,父级div的剩余空间将被第二个子div占据,导致第一个子div的宽度变小。
在这里插入图片描述

此时要将第一个子div的flex-shrink属性设置为0,可以防止其缩小。

.child1 {flex-shrink: 0;/*防止第二个子div的内容超出了父级div的宽度,其在空间不足时缩小*/}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/210808.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle:左连接、右连接、全外连接、(+)号详解

目录 Oracle 左连接、右连接、全外连接、&#xff08;&#xff09;号详解 1、左外连接&#xff08;LEFT OUTER JOIN/ LEFT JOIN&#xff09; 2、右外连接&#xff08;RIGHT OUTER JOIN/RIGHT JOIN&#xff09; 3、全外连接&#xff08;FULL OUTER JOIN/FULL JOIN&#xff0…

【剑指offer|图解|位运算】训练计划VI+撞色搭配

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、剑指offer每日一练 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 一. ⛳️训练计划VI&#xff08;题目难度&#xff1a;中等&#xff09;1.1 题目1.2 示例1.3 …

(11_29)畅捷通的 Serverless 探索实践之路

作者&#xff1a;计缘 畅捷通介绍 畅捷通是中国领先的小微企业财税及业务云服务提供商&#xff0c;成立于2010年。畅捷通在2021年中国小微企业云财税市场份额排名第一&#xff0c;在产品前瞻性及行业全覆盖方面领跑市场&#xff0c;位居中国小微企业云财税厂商矩阵领军象限前…

免费WordPress站群插件-批量管理站群的免费软件

WordPress站群插件&#xff1a;让文章管理如丝般顺滑 在众多网站建设工具中&#xff0c;WordPress一直以其简便易用、丰富的插件生态而备受青睐。对于站群管理者而言&#xff0c;如何高效地更新、发布和推送文章是一项不可忽视的任务。本文将专注分享一款WordPress站群插件&am…

SQL Server 2016(分离和附加数据库)

1、实验环境。 基于上一个实验《SQL Server&#xff08;创建数据库&#xff09;》 2、需求描述。 class数据库的数据文件和事务日志文件都位于C:\db_class目录下。现在需要把class数据库的数据文件和事务日志文件分开存放&#xff0c;数据文件class.mdf存放于原位置&#xff0…

GNN Maximum Flow Problem (From Shusen Wang)

Maximum Flow Problem ShusenWang 图数据结构和算法课程笔记 Slides Maximum Flow Problem Description Naive Algorithm Residual Capacity - FlowLeft: Original GraphRight: Residual Graph - Bottleneck capacity 2- Iteration 2:- Find an augmenting path: s -&g…

unity 2d入门飞翔小鸟按钮点击功能且场景切换(二)

1、素材包获取 链接: https://pan.baidu.com/s/1KgCtQ_7wt2mlbGbIaMVvmw 提取码: xxh8 2、将素材全部拉进去 3、创建新的场景 并且将场景添加到build settings里面 4、脚本 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityE…

❀My学习Linux命令小记录(14)❀

目录 ❀My学习Linux命令小记录&#xff08;14&#xff09;❀ 56.man指令 57.whatis指令 58.info指令 59.--help指令 60.uname指令 ❀My学习Linux命令小记录&#xff08;14&#xff09;❀ 56.man指令 功能说明&#xff1a;查看Linux中的指令帮助。 &#xff08;ps.man命…

初识Linux——基本指令(详解)1

呀哈喽&#xff0c;我是结衣。 在学习数据结构的同时&#xff0c;也不要忘了Linux的学习啊。今天我们开始Linux的教学&#xff0c;在学习之前我们肯定要会搭建Linux的学习环境&#xff0c;在我们的以前的博客里是有讲解的&#xff0c;所以所以这里我们就不在多说&#xff0c;我…

你好!哈希表【JAVA】

1.初识&#x1f3b6;&#x1f3b6;&#x1f3b6; 它基本上是由一个数组和一个哈希函数组成的。哈希函数将每个键映射到数组的特定索引位置&#xff0c;这个位置被称为哈希码。当我们需要查找一个键时&#xff0c;哈希函数会计算其哈希码并立即返回结果&#xff0c;因此我们可以…

【Math】高斯分布的乘积 Product of Guassian Distribution【附带Python实现】

【Math】高斯分布的乘积 Product of Guassian Distribution【附带Python实现】 文章目录 【Math】高斯分布的乘积 Product of Guassian Distribution【附带Python实现】1.推导2. CodeReference 结果先放在前面 1.推导 在学习PEARL算法的时候&#xff0c;encoder的设计涉及到了…

Linux下安装Nginx

目录 Nginx简介 Nginx安装 Nginx指令 停止nginx服务 安全退出 重新加载配置文件 查看nginx进程 Nginx简介 Nginx 是一个高性能的HTTP和反向代理web服务器&#xff0c;其特点是占有内存少&#xff0c;并发能力强&#xff0c;其并发能力在同类型的网页服务器中表现较好。 …

行业内卷严重到什么程度了?

一.内卷现状 最近大家都吐槽找工作难&#xff0c;确实很难。 不得不说&#xff0c;现在找工作的难度是以前的很多倍。甚至可以说地狱级都不为过。 以前只要简历一挂到网上&#xff0c;就有很多电话打过来。特别是在一线城市&#xff0c;各种类型企业的HR都来找&#xff0c;希…

DFT(离散傅里叶变换)的通俗理解

本文包含了博主对离散傅里叶变换&#xff0c;负频率&#xff0c;实信号与复信号频谱的理解&#xff0c;如有不妥&#xff0c;欢迎各位批评指正与讨论。 文章目录 DFT的理解信号的频谱实信号的频谱复信号的频谱 DFT的理解 傅里叶变换是一种将信号从时域转换到频域的数学工具。…

TCP_握手+挥手过程状态变化分析

TCP状态解读 握手挥手过程状态变化 同时握手 双发同时发起syn请求&#xff0c;状态变化过程如下&#xff1a; 图片来源&#xff1a;http://www.tcpipguide.com/free/t_TCPConnectionEstablishmentProcessTheThreeWayHandsh-4.htm 同时挥手 4次挥手&#xff0c;可以理解为2…

2023.12.2 做一个后台管理网页(左侧边栏实现手风琴和隐藏/出现效果)

2023.12.2 做一个后台管理网页&#xff08;左侧边栏实现手风琴和隐藏/出现效果&#xff09; 网页源码见附件&#xff0c;比较简单&#xff0c;之前用很多种方法实现过该效果&#xff0c;这次的效果相对更好。 实现功能&#xff1a; &#xff08;1&#xff09;实现左侧边栏的手…

智安网络|语音识别技术:从历史到现状与未来展望

语音识别技术是一种将语音信号转化为可识别的文本或命令的技术&#xff0c;近年来得到了广泛应用和关注。 一. 语音识别的发展现状 1.历史发展 语音识别技术的起源可以追溯到20世纪50年代&#xff0c;但直到近年来取得了显著的突破和进展。随着计算机性能的提升和深度学习算法…

用户反馈组件实现(Vue3+ElementPlus)含图片拖拽上传

用户反馈组件实现&#xff08;Vue3ElementPlus&#xff09;含图片拖拽上传 1. 页面效果1.1 正常展示1.2 鼠标悬浮1.3 表单 2. 代码部分1.2 html、ts1.2 less部分 3. 编码过程遇到的问题 1. 页面效果 1.1 正常展示 1.2 鼠标悬浮 1.3 表单 2. 代码部分 1.2 html、ts <templ…

大部分人都不知道微信语音是可以取消的

在微信聊天时&#xff0c;许多人都喜欢使用微信语音聊天&#xff0c;因为这样既省时又不需要打字&#xff0c;使用起来非常便捷。然而&#xff0c;不少人发现微信语音有一个小缺点&#xff0c;那就是一旦说错话&#xff0c;只要一松手语音就自动发送出去了&#xff0c;根本来不…

RT-Thread Studio文件消失不见或被排除构建

不得不说RT-Thread Studio里面配置真多&#xff0c;今天我同事的电脑发现根本没有被画斜杠的文件夹&#xff0c;导致我想移植f1的写内部flash这个&#xff08;可以看上一个文章&#xff09;时候不能直接点击属性排除构建&#xff0c;然后在网上查找的时候也没怎么找到说法&…