当前位置： 首页 > news >正文

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

news 2026/1/18 14:25:52

案例目标

文字部分自适应并且居中

在这里插入图片描述

图中是一个弹窗，我现在使用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的宽度，其在空间不足时缩小*/}

在这里插入图片描述

相关文章：

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

案例目标 文字部分自适应并且居中 图中是一个弹窗&#xff0c;我现在使用flex的布局来实现&#xff0c;标题和关闭按钮。因为是uni-app,所以标签是view 。你可以自行替换为 代码 <view class"popup-box"><view class"title"><view class&…...

编程日记 2023/11/29 11:13:38

【LeetCode】203. 移除链表元素

203. 移除链表元素 难度&#xff1a;简单 题目 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff…...

编程日记 2023/11/29 11:12:35

IDEA2023版本创建Sping项目只能勾选17和21，却无法使用Java8？（已解决）

方案&#xff1a;替换创建项目的源 我们只知道IDEA页面创建Spring项目&#xff0c;其实是访问spring initializr去创建项目。故我们可以通过阿里云国服去间接创建Spring项目。将https://start.spring.io/或者http://start.springboot.io/替换为 https://start.aliyun.com/...

编程日记 2023/11/29 11:11:35

Vue生命周期详解

以下是 Vue 生命周期钩子函数分别做了什么事情的详细说明 详细说明 beforeCreate&#xff08;创建前&#xff09;&#xff1a;在实例初始化之前调用。此时&#xff0c;实例的数据观测 (data observer)、属性和方法的运算&#xff0c;以及事件配置等内部设置都已完成&#xff0…...

编程日记 2023/11/29 11:10:34

政务大数据与资源平台建设解决方案：PPT全文75页，附下载

关键词&#xff1a;智慧政务解决方案&#xff0c;大数据解决方案&#xff0c;数据中心解决方案&#xff0c;数据治理解决方案 一、政务大数据与资源平台建设背景 1、政务大数据已成为智慧城市建设的必要基础 为响应国家不断加快5G基建、大数据、人工智能等新型基础设施建设布…...

编程日记 2023/11/29 11:09:32

环境监测传感器守护我们的地球

随着人类活动的不断增加&#xff0c;环境问题日益凸显。为了更好地保护我们的地球&#xff0c;环境监测成为了一项非常重要的任务。而在这个领域&#xff0c;传感器技术发挥着至关重要的作用。今天&#xff0c;我们就来聊聊WX-WQX12 环境监测传感器。 环境监测传感器是一种能够…...

编程日记 2023/11/29 11:08:32

PHP 循环控制 学习资料

PHP 循环控制 在 PHP 中&#xff0c;循环控制语句用于控制循环的执行流程&#xff0c;包括跳出循环、跳过当前迭代等操作。以下是 PHP 中常用的循环控制语句的介绍和示例&#xff1a; break 语句 break 语句用于立即跳出当前循环&#xff0c;并继续执行循环之后的代码。 示…...

编程日记 2023/11/29 11:07:30

Unity 关于生命周期函数的一些认识

Unity 生命周期函数主要有以下一些&#xff1a; Awake(): 在脚本被加载时调用。用于初始化对象的状态和引用。 OnEnable(): 在脚本组件被启用时调用。在脚本组件被激活时执行一次&#xff0c;以及在脚本组件被重新激活时执行。 Reset(): 在脚本组件被重置时调用。用于重置脚本…...

编程日记 2023/11/29 11:06:29

大数据学习(26)-spark核心总结

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博主哦&#x1f91…...

编程日记 2023/11/29 11:05:28

EC 404 information economics

EC 404 information economics WeChat: zh6-86...

编程日记 2023/11/29 11:04:28

基于单片机的烟雾检测报警装置（论文+源码）

1.系统设计 &#xff08;1&#xff09;利用传感器实现环境中温度、烟雾浓度的实时检测&#xff1b; &#xff08;2&#xff09;系统检测的各项数据信息通过液晶模块进行显示&#xff0c;提高设计可视化&#xff1b; &#xff08;3&#xff09;系统可以根据实际情况利用按键模…...

编程日记 2023/11/29 11:03:27

C语言面试之旅：掌握基础，探索深度（面试实战之c语言关键词中篇）

劝人的话就像清晨的闹钟&#xff0c;只对别人有用&#xff0c;却永远叫不醒自己。 ----小新 一.预处理指令 &#xff08;1&#xff09;#define & typedef #define是C语言中定义的语法&#xff0c;是预处理指令&#xff0c;在预处理时进行简单而机械的字符串替换&…...

编程日记 2023/11/29 11:02:26

项目监控：项目跟踪和控制的工具和步骤

项目管理不仅仅是分配和审查任务&#xff0c;还包括平衡团队成员的工作量、创建预测和避免障碍的工作流程。整个过程涉及许多步骤&#xff0c;因此&#xff0c;项目监控成为了成功业务活动的关键之一&#xff0c;是项目经理确保与团队共同实施的计划顺利进行的方式。 项目监控为…...

编程日记 2023/11/29 11:01:25

GOAT：多模态、终身学习、平台无关的机器人通用导航系统

机器人应用中涉及到的核心技术包括&#xff1a;环境感知与理解、实时定位与建图、路径规划、行为控制等。GOAT通过多模态结合终生学习的方式让你的机器人可以在未知环境中搜索和导航到任何物体。小白也可以零门槛上手。 项目地址&#xff1a;https://theophilegervet.github.i…...

编程日记 2023/11/29 11:00:24

[webpack] webpack 插件大全

clean-webpack-plugin 一个webpack插件&#xff0c;用来删除/清理你的构建文件夹 html-webpack-plugin 该插件将为你生成一个 HTML5 文件&#xff0c; 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle js 文件 zip-webpack-plugin 该插件用来压缩所有文件成一…...

编程日记 2023/11/29 10:59:23

UE4/UE5 雾

雾 UE4/UE5 雾平面雾材质效果图&#xff1a; 3D雾区材质效果图&#xff1a; UE4/UE5 雾 平面雾 做好将材质放在Plane上就行 材质 效果图&#xff1a; 3D雾区 做好将材质放在3D模型上就行 材质 效果图&#xff1a;...

编程日记 2023/11/29 10:58:22

Linux处理文件常见命令

目录 1 cp 2 rm 3 zip与unzip 3.1 zip 3.2 unzip 4 cd 5 ls 6 chmod 7 scp 7.1 文件在你操作的机器上&#xff0c;你要传给另一个机器 7.1.1 文件 7.1.2 文件夹 7.2 文件在另一个机器上&#xff0c;你要把文件搞到你操作的机器上 7.2.1 文件 7.2.…...

编程日记 2023/11/29 10:57:21

sed应用

一.sed 1.Sed概述 sed编辑器是一种流编辑器&#xff0c;流编辑器会在编辑器处理数据之前基于预先提供的一组规则来编辑数据流。 sed编辑器可以根据命令来处理数据流中的数据&#xff0c;这些命令要么从命令行中输入&#xff0c;要存储在一个命令文本文件中。 2.sed命令的格…...

编程日记 2023/11/29 10:56:20

Linux配置SFTP用户的详细过程

0. 背景 Linux机器上已有路径/data/tomcat/apache-tomcat-8.5.96/webapps/webroot,需要在该路径之下配置一个目录对外暴露给业务人员使用。业务人员使用sftp协议上传文件。 下面是相关配置&#xff1a; SFTP 用户名&#xff1a;iios SFTP主目录&#xff1a;/data/tomcat/apa…...

编程日记 2023/11/29 10:55:19

前端---JavaScript篇

1. 介绍 JavaScript 是 前端开发人员必须学习的 3 门语言中的一门&#xff1a; HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 控制了网页的行为 接下来开始详解JavaScript。 2.引入方法 js有两种导入方式&#xff0c;一种是内部脚本&#xff1a;直接在html页面中…...

编程日记 2023/11/29 10:53:16

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2026/1/15 8:45:31

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2026/1/16 23:31:44

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2026/1/15 8:08:52

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2026/1/15 4:57:29

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2026/1/15 5:29:48

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/12/20 15:01:20

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/1/15 6:36:32

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/1/17 15:41:58

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00