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

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

news 2026/2/11 0:17:21

案例目标

文字部分自适应并且居中

在这里插入图片描述

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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2026/2/10 13:19:02

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/9/18 11:31:13

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/12/9 14:22:07

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2026/1/31 7:11:11

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...

编程新知 2026/2/6 5:51:08

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

编程新知 2026/2/7 0:29:10

Linux-进程间的通信

1、IPC&#xff1a; Inter Process Communication&#xff08;进程间通信&#xff09;&#xff1a; 由于每个进程在操作系统中有独立的地址空间&#xff0c;它们不能像线程那样直接访问彼此的内存&#xff0c;所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...

编程新知 2026/2/2 19:17:14

CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx

“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网&#xff08;IIoT&#xff09;场景中&#xff0c;结合 DDS&#xff08;Data Distribution Service&#xff09; 和 Rx&#xff08;Reactive Extensions&#xff09; 技术&#xff0c;实现 …...

编程新知 2025/11/8 23:40:56