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

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

news 2026/5/28 20:44:28

案例目标

文字部分自适应并且居中

在这里插入图片描述

图中是一个弹窗，我现在使用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

告别命令行！用Python脚本批量管理Docker容器，效率提升不止一点点

告别命令行&#xff01;用Python脚本批量管理Docker容器&#xff0c;效率提升不止一点点每次在终端敲入docker ps、docker stop、docker rm时&#xff0c;你是否想过——当容器数量超过两位数&#xff0c;这种重复劳动是否在消耗你的生命&#xff1f;去年我们团队在迁移微服务架…...

编程新知 2026/5/26 3:32:08

Kerberos身份认证原理与实战排错指南

1. 为什么今天还要花时间搞懂 Kerberos&#xff1f;——一个被低估的“老协议”正在悄悄支撑着你的日常你每天登录公司内网查邮件、访问财务系统提交报销、用 Jenkins 构建代码、甚至在 Windows 域环境中打开一台同事的共享文件夹……这些看似顺滑的操作背后&#xff0c;大概率…...

编程新知 2026/5/26 3:22:07

Android 11开发避坑：为什么你的App获取的Wifi MAC地址总是变？手把手教你配置固定MAC

Android 11开发实战&#xff1a;彻底解决Wifi MAC地址随机化问题最近在开发一个设备管理系统时&#xff0c;遇到了一个棘手的问题&#xff1a;我们的App在Android 11设备上获取的Wifi MAC地址每次都不一样&#xff0c;导致基于MAC地址的设备识别功能完全失效。经过一周的深入研…...

编程新知 2026/5/26 3:11:57

Yokogawa AAI835-H50/K4A00模拟输入/输出模块

Yokogawa AAI835-H50/K4A00 模拟输入/输出模块产品特点&#xff1a;通道配置&#xff1a;共8个通道&#xff0c;含4路模拟输入和4路模拟输出。信号类型&#xff1a;所有通道均支持4-20mA标准电流信号。HART通信&#xff1a;支持HART协议&#xff0c;可与智能现场设备双向数字通…...

编程新知 2026/5/26 2:41:38

用数字逻辑门复刻柏林钟：从二进制编码到硬件实现

1. 项目概述&#xff1a;用数字电路复刻“柏林钟”作为一个在柏林长大的孩子&#xff0c;我从小就对库达姆大街上的那座“柏林钟”着迷。它不像传统时钟那样用指针或数字告诉你时间&#xff0c;而是通过几排不同颜色的发光方块&#xff0c;以一种近乎艺术的方式呈现时间。这种独…...

编程新知 2026/5/26 2:23:31

SAP-ABAP：变量、常量、结构与内表声明（10篇博客合集） 第五篇：声明时的键值设计技巧：结构与内表的主键、非主键配置指南

变量、常量、结构与内表声明&#xff08;10篇博客合集&#xff09; 第五篇&#xff1a;声明时的键值设计技巧&#xff1a;结构与内表的主键、非主键配置指南如果把内表比作一张内存中的“数据库表”&#xff0c;那么键就是这张表的索引甚至主键。键的设计直接决定了数据的唯一性…...

编程新知 2026/5/26 0:56:48

告别浪费！SolidWorks企业级共享方案，实现降本增效全攻略

还在为 SolidWorks 高昂的硬件投入和混乱的图纸管理头疼&#xff1f;告别“一人一机”的浪费模式&#xff0c;企业级共享方案才是降本增效的正解。这套攻略基于“1 台高性能服务器 云飞云共享云桌面”架构&#xff0c;帮你把硬件成本砍掉 60%&#xff0c;把软件利用率翻倍。一…...

编程新知 2026/5/26 0:30:20

长期使用Token Plan套餐在项目开发中的成本观察

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 长期使用Token Plan套餐在项目开发中的成本观察 在AI驱动的项目开发中&#xff0c;成本控制与预算管理是团队负责人必须面对的现实…...

编程新知 2026/5/25 23:06:49

破解材料数据荒：合成数据与随机森林预测聚合物阻燃性能

1. 项目概述与核心挑战在材料研发领域&#xff0c;尤其是涉及公共安全的聚合物阻燃性研究&#xff0c;传统实验方法正面临巨大瓶颈。想象一下&#xff0c;你是一位材料工程师&#xff0c;需要设计一种用于高铁内饰或高层建筑电缆护套的新型聚合物&#xff0c;其阻燃性能必须满足…...

编程新知 2026/5/25 22:26:31

通过curl命令快速测试Taotoken大模型API的连通性与返回格式

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过curl命令快速测试Taotoken大模型API的连通性与返回格式 在集成大模型能力到应用时&#xff0c;开发者通常需要一种快速、轻量的…...

编程新知 2026/5/25 21:25:46