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

使用 display: flex 实现动态布局：每行两个 item，单数时最后一个占满整行

news 来源：原创 2025/8/25 21:21:03

在这里插入图片描述

文章目录

  • 使用 `display: flex` 实现动态布局：每行两个 item，单数时最后一个占满整行 🎯
    • 一、需求分析
    • 二、实现思路
    • 三、代码实现
      • 1. HTML 结构
      • 2. CSS 样式
      • 关键点解析：
    • 四、效果演示
      • HTML 示例：
      • 效果：
    • 五、完整代码

使用 display: flex 实现动态布局：每行两个 item，单数时最后一个占满整行 🎯

这两天看到一个面试题有感而发，面试题如下
在这里插入图片描述

在前端开发中，灵活布局是一个常见的需求。今天我们来探讨如何使用 display: flex 实现一个动态布局：每行显示两个 item，间隔为 20px，并且当 item 数量为单数时，最后一个 item 占满整行。🧑‍💻

本文将详细介绍实现方法，并附上完整代码，帮助你轻松掌握这一技巧！

效果展示：
> 这里是导文

一、需求分析

我们需要实现以下效果：

  1. 每行显示两个 item，且 item 之间的间隔为 20px。
  2. 当 item 数量为单数时，最后一个 item 占满整行。
  3. item 的数量 n 是动态的，布局需要自动适应。

二、实现思路

为了实现上述需求，我们可以借助 display: flex 的强大功能：

  1. 弹性盒子布局：使用 flex 实现灵活的排列方式。
  2. 换行功能：通过 flex-wrap: wrap 实现自动换行。
  3. 动态宽度：通过 calc() 计算每个 item 的宽度，并处理单数情况。

三、代码实现

1. HTML 结构

首先，我们定义一个容器 .box，并在其中动态生成 item：

<div class="box"><div v-for="item in n" :key="item" class="item"></div>
</div>
  • .box 是容器，用于包裹所有 item。
  • v-for 是 Vue 的语法，用于动态生成 item（假设 n 是动态的）。

2. CSS 样式

接下来，我们通过 CSS 实现布局效果：

.box {display: flex;flex-wrap: wrap; /* 允许换行 */gap: 20px; /* 设置 item 之间的间隔 */
}.item {flex: 1 1 calc(50% - 10px); /* 每行两个 item，减去间隔的一半 */box-sizing: border-box;background-color: #ccc;height: 100px; /* 设置 item 的高度 */border: 1px solid #999;
}/* 当 n 为单数时，最后一个 item 占满整行 */
.item:last-child:nth-child(odd) {flex: 1 1 100%;
}

关键点解析：

  1. display: flex：将容器设置为弹性盒子，实现灵活的布局。
  2. flex-wrap: wrap：允许内容换行，确保每行只有两个 item。
  3. gap: 20px：设置 item 之间的间隔为 20px。
  4. flex: 1 1 calc(50% - 10px)：
    • flex-grow: 1：允许 item 扩展。
    • flex-shrink: 1：允许 item 收缩。
    • flex-basis: calc(50% - 10px)：设置 item 的基础宽度为 50% 减去间隔的一半（因为每行有两个 item，总间隔为 20px，每个 item 分摊 10px）。
  5. item:last-child:nth-child(odd)：
    • 当 n 为单数时，最后一个 item 会匹配 :last-child 和 :nth-child(odd)。
    • 设置 flex: 1 1 100%，使其占满整行。

四、效果演示

假设 n = 5，效果如下：

  • 前两行每行有两个 item，宽度各为 50%，间隔为 20px。
  • 最后一行只有一个 item，宽度为 100%。

HTML 示例：

<div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div>
</div>

效果：

  • 第一行：item 1 和 item 2。
  • 第二行：item 3 和 item 4。
  • 第三行：item 5 占满整行。

五、完整代码

以下是完整的 HTML + CSS 代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flex 布局示例</title><style>.box {display: flex;flex-wrap: wrap;gap: 20px;}.item {flex: 1 1 calc(50% - 10px);box-sizing: border-box;background-color: #ccc;height: 100px;border: 1px solid #999;}.item:last-child:nth-child(odd) {flex: 1 1 100%;}</style>
</head>
<body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div>
</body>
</html>

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。

相关文章：

使用 display: flex 实现动态布局：每行两个 item，单数时最后一个占满整行

文章目录 使用 display: flex 实现动态布局&#xff1a;每行两个 item&#xff0c;单数时最后一个占满整行 &#x1f3af;一、需求分析二、实现思路三、代码实现1. HTML 结构2. CSS 样式关键点解析&#xff1a; 四、效果演示HTML 示例&#xff1a;效果&#xff1a; 五、完整代码…...

编程日记 2025/8/25 21:21:03

android 支持自定义布局、线程安全、避免内存泄漏的 Toast 工具类

支持自定义布局&#xff1a;可以灵活地显示自定义样式的 Toast。 线程安全&#xff1a;确保在主线程中显示 Toast&#xff0c;避免崩溃。 避免内存泄漏&#xff1a;使用 ApplicationContext 和取消机制&#xff0c;防止内存泄漏问题。 工具类&#xff1a;作为一个通用的工具…...

编程日记 2025/8/23 14:44:33

密码学系列 - 利用CPU指令加速

CPU擅长的操作: AES 指令, SHA 指令为了充分利用流水线带来的好处&#xff0c;出现了一种叫做RISC的CPU架构。RISC是Reduced Instruction Set Computer&#xff08;精简指令集&#xff09;的缩写 SHA加速 Filecoin系列 - 源码分析 - CPU SHA扩展 当前的构造在某些阶段确实涉…...

编程日记 2025/8/24 22:41:01

什么是美颜SDK？从几何变换到深度学习驱动的美颜算法详解

美颜SDK是一种用于处理图像与视频的开发工具&#xff0c;能够提供磨皮、美白、瘦脸、五官优化、动态贴纸等美颜特效。它广泛应用于直播、短视频、社交、在线会议、电商等行业&#xff0c;帮助用户在视频或图片中实现更好的视觉呈现。 一、从几何变换到深度学习&#xff1a;美颜…...

编程日记 2025/8/25 21:20:02

用Deepseek写一个五子棋微信小程序

在当今快节奏的生活中&#xff0c;休闲小游戏成为了许多人放松心情的好选择。五子棋作为一款经典的策略游戏&#xff0c;不仅规则简单&#xff0c;还能锻炼思维。最近&#xff0c;我借助 DeepSeek 的帮助&#xff0c;开发了一款五子棋微信小程序。在这篇文章中&#xff0c;我将…...

编程日记 2025/8/16 12:52:03

FPGA 实验报告：四位全加器与三八译码器仿真实现

目录 安装Quartus软件 四位全加器 全加器、半加器 半加器&#xff1a; 全加器&#xff1a; 四位全加器电路图 创建项目 半加器 全加器 四位全加器 代码实现 半加器 全加器 四位全加器 三八译码器 创建项目 代码展示 modelsim仿真波形图 四位全加器 三八译码…...

编程日记 2025/8/24 1:49:47

Vercel Serverless

1. 引言 现代应用程序是为适应当前技术环境需求而设计的软件&#xff0c;采用现代开发工具和实践&#xff0c;针对云部署和可扩展性优化。它们由多个模块化小组件组成&#xff0c;便于集成和缩放&#xff0c;具有高度的敏捷性和适应性&#xff0c;能快速响应用户或业务需求变化…...

编程日记 2025/8/20 5:24:02

胜软科技冲刺北交所一年多转港股：由盈转亏，毛利率大幅下滑

《港湾商业观察》施子夫 近期&#xff0c;山东胜软科技股份有限公司&#xff08;以下简称&#xff0c;胜软科技&#xff09;递表港交所获受理&#xff0c;独家保荐机构为广发证券&#xff08;香港&#xff09;。 在赴港上市之前&#xff0c;胜软科技还曾谋求过A股上市&#x…...

编程日记 2025/8/25 21:18:09

JJJ：linux sysfs相关

文章目录 1.sysfs&#xff08;属性&#xff09;文件的创建、读、写1.1 创建流程1.2 open流程1.3 read流程 2.补充2.1 sysfs下常见目录介绍2.2 属性相关2.2.1 简介2.2.2 attribute文件的创建 2.3 sysfs目录如何创建的 1.sysfs&#xff08;属性&#xff09;文件的创建、读、写 1…...

编程日记 2025/8/25 21:20:01

vue3 遇到babel问题（exports is not defined） 解决方案

由于我在引用ant-design-vue插件&#xff0c;于是产生了下图的问题。 1.问题分析 Babel 是一个 JavaScript 编译器&#xff0c;主要用于&#xff1a;将 ES6 代码转译为 ES5 代码&#xff0c;以兼容旧版浏览器。处理模块化语法&#xff08;如 import/export&#xff09;。 2.解…...

编程日记 2025/8/22 18:34:16

《原型链的故事：JavaScript 对象模型的秘密》

原型链&#xff08;Prototype Chain&#xff09; 是 JavaScript 中实现继承的核心机制。每个对象都有一个内部属性 [[Prototype]]&#xff08;可以通过 __proto__ 访问&#xff09;&#xff0c;指向其原型对象。每个对象都有一个原型&#xff0c; 原型本身也是一个对象&#xf…...

编程日记 2025/8/25 21:18:09

Python怎样安装，Windows/Mac/Linux系统安装教程

Python的安装步骤如下&#xff0c;结合不同操作系统和关键注意事项进行说明&#xff1a; 一、Windows系统安装 下载安装包 访问Python官网&#xff0c;点击“Downloads”选择适合的版本&#xff08;推荐稳定版&#xff0c;如3.9或3.10&#xff0c;避免最新版可能的不兼容问题&a…...

编程日记 2025/8/25 21:21:02

03.08

1. 数字三角形 题目描述 上图给出了一个数字三角形。从三角形的顶部到底部有很多条不同的路径。对于每条路径&#xff0c;把路径上面的数加起来可以得到一个和&#xff0c;你的任务就是找到最大的和。 路径上的每一步只能从一个数走到下一层和它最近的左边的那个数或者右 边的那…...

编程日记 2025/8/22 10:43:42

LeetCode 解题思路 11（Hot 100）

解题思路&#xff1a; 若相等&#xff1a; 直接返回 true。若当前元素大于目标值&#xff1a; 由于列递增&#xff0c;当前列下方所有元素均大于目标值&#xff0c;故排除该列&#xff08;向左移动&#xff09;。若当前元素小于目标值&#xff1a; 由于行递增&#xff0c;当前…...

编程日记 2025/8/24 14:16:36

使用websocket，注入依赖service的bean为null

问题&#xff1a;依赖注入失败&#xff0c;service获取不到&#xff0c;提示null 这是参考代码 package com.shier.ws;import cn.hutool.core.date.DateUtil; import cn.hutool.json.JSONObject; import cn.hutool.json.JSONUtil; import com.google.gson.Gson; import com.s…...

编程日记 2025/8/19 10:26:23

【数据结构初阶】---堆的实现、堆排序以及文件中的TopK问题

1.树的概念及结构 1.1树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有一个特殊的结点&…...

编程日记 2025/8/21 18:40:05

【量化策略】均值回归策略

【量化策略】均值回归策略 &#x1f680;量化软件开通 &#x1f680;量化实战教程 技术背景和应用场景 均值回归策略是一种基于统计学原理的量化交易策略&#xff0c;它假设资产价格会围绕其历史平均水平波动。当价格偏离这个平均水平时&#xff0c;就有可能会回到平均值附…...

编程日记 2025/8/19 17:27:00

设计模式 - 工厂模式 精准梳理精准记忆

1、代码片段 - 带入理解 一、核心模式分类 简单工厂模式&#xff08;编程习惯&#xff0c;非 GoF 设计模式&#xff09;工厂方法模式&#xff08;GoF 创建型模式&#xff09;抽象工厂模式&#xff08;GoF 创建型模式&#xff09; 二、演变过程&#xff1a;咖啡店案例 初始实现…...

编程日记 2025/8/20 5:24:12

WIFI ESP8266以及基础功能介绍

芯片一旦烧写了程序就不可以使用AT指令集&#xff0c;需要重新刷回AT指令库才可以使用 wifi的通信频段是2.4G免费频段。 AT指令 AT&#xff08;attention&#xff09;command set.AT指令集或命令集&#xff0c;一般称为AT指令 海斯命令集&#xff1a;Hayes command set 默认…...

编程日记 2025/8/22 5:21:32

面试java做了一道逻辑题，人麻了

题目&#xff1a;给你一个5升水壶&#xff0c;一个6升水壶&#xff0c;去池塘中取水&#xff0c;如何保证最后取出的水是3升&#xff1f; 思考了很久终于想出来了&#xff0c;这里用X5代表5升的桶&#xff0c;X6代表6升的桶&#xff1a; ① 6升桶装满&#xff0c;X50&#xff…...

编程日记 2025/8/20 18:08:51

go语言因为前端跨域导致无法访问到后端解决方案

前端服务8080访问后端8081这端口显示跨域了 ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:116:14) at Axios.request (webpack-internal:///./node_modules/axios/lib/core/A…...

编程日记 2025/8/18 23:22:05

svn删除所有隐藏.svn文件，文件夹脱离svn控制

新建一个文件&#xff0c;取名remove-svn-folders.reg&#xff0c;输入如下内容&#xff1a; Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN] "Delete SVN Folders" [HKEY_LOCAL_MACHINE\SOFTWARE\Class…...

编程日记 2025/8/25 21:18:09

Greenplum6.19集群搭建

一&#xff0c;安装说明 1.1环境说明 1、首先确定部署的环境&#xff0c;确定下服务器的端口&#xff0c;一般默认是22的端口&#xff1b; 2、当前这份文档是服务器处于10022端口下部署的&#xff08;现场生产环境要求&#xff0c;22端口在生产环境存在安全隐患&#xff09;&…...

编程日记 2025/8/20 23:11:31

C/C++蓝桥杯算法真题打卡（Day4）

一、P11041 [蓝桥杯 2024 省 Java B] 报数游戏 - 洛谷 算法代码&#xff1a; #include<bits/stdc.h> using namespace std;// 计算第 n 个满足条件的数 long long findNthNumber(long long n) {long long low 1, high 1e18; // 二分查找范围while (low < high) {lo…...

编程日记 2025/8/18 15:44:30

TinyWebServer项目笔记——01 线程同步机制封装类

目录 1.基础知识 &#xff08;1&#xff09;RALL &#xff08;2&#xff09;信号量 &#xff08;3&#xff09;互斥量 &#xff08;4&#xff09;条件变量 2.功能 1.基础知识 &#xff08;1&#xff09;RALL RALL全称“Resource Acquisition is Initialization”&#xf…...

编程日记 2025/8/19 18:09:21

如何在Ubuntu上直接编译Apache Doris

以下是在 Ubuntu 22.04 上直接编译 Apache Doris 的完整流程&#xff0c;综合多个版本和环境的最佳实践&#xff1a; 注意&#xff1a;Ubuntu的数据盘VMware默认是20G&#xff0c;编译不够用&#xff0c;给到50G以上吧 一、环境准备 1. 安装系统依赖 # 基础构建工具链 apt i…...

编程日记 2025/8/24 4:53:12

算法006——和为S 的两个数

力扣——查找总价格为目标值的两个商品点击跳转 注意题目中的关键信息升序 我们利用双指针&#xff0c;不管 target 是多少&#xff0c;让一个指针指向最小值&#xff0c;让一个指针指向最大 那么&#xff0c;共有三种情况 我们首先遇到的是第二种情况 sum < target left …...

编程日记 2025/8/25 12:02:28

物联网设备接入系统后如何查看硬件实时数据?

要在软件中实时查看硬件设备的信息&#xff0c;通常需要结合前后端技术来实现。以下是设计思路和实现步骤&#xff1a; 1. 系统架构设计 实时查看硬件设备信息的系统通常采用以下架构&#xff1a; 数据采集层: 硬件设备通过传感器采集数据&#xff0c;发送到InfluxDB。数据存…...

编程日记 2025/8/24 19:05:07

CSS—属性继承与预处理器：2分钟掌握预处理器

个人博客&#xff1a;haichenyi.com。感谢关注 1. 目录 1–目录2–属性继承3–预处理器 2. 属性继承 像Android里面继承extends&#xff0c;类继承&#xff0c;子类可以使用父类的public和protected的属性和方法。子类可以直接用。   在CSS里面也是类似的。CSS里面是布局里面…...

编程日记 2025/8/21 2:54:05

前端知识点---http.createHttp()的理解(arkts)

通俗易懂的例子&#xff1a;点外卖 &#x1f354;&#x1f964; 想象一下&#xff0c;你在家里点外卖&#xff0c;HTTP 请求就像是你和餐厅之间的沟通方式。 1️⃣ 没有 http.createHttp()&#xff1a;每次点餐都重新拨电话 &#x1f4de; 如果你每次点餐都重新拨打餐厅的电话…...

编程日记 2025/8/25 1:24:44

信息安全访问控制、抗攻击技术、安全体系和评估（高软42）

系列文章目录 信息安全访问控制、抗攻击技术、安全体系和评估 文章目录 系列文章目录前言一、信息安全技术1.访问控制2.抗攻击技术 二、欺骗技术1.ARP欺骗2.DNS欺骗3.IP欺骗 三、抗攻击技术1.端口扫描2.强化TCP/IP堆栈 四、保证体系和评估1.保证体系2.安全风险管理 五、真题在…...

编程日记 2025/8/25 21:20:00

【深度学习】宠物品种分类Pet Breeds Classifier

文章目录 宠物品种数据集制作宠物品种标签图像预处理Presizing 损失函数loss观察模型的性能提升模型的性能learning rate finder使用CLR算法训练选择学习率的策略重新训练 迁移学习微调fine_tunefit_one_cycle有判别力的学习率 选择epoch的数量更深的网络架构 宠物品种数据集 …...

编程日记 2025/8/25 21:18:53

PyQt组件间的通信方式

PyQt组件间的通信方式 PyQt组件间的通信方式 1. 组件介绍 1.1 组件的定义1.2 组件的分类 2. 组件的通信方式 2.1 信号与槽&#xff08;Signal & Slot&#xff09; 1. 组件介绍 在 Qt 框架中&#xff0c;‌组件‌&#xff08;Component&#xff09;是构建图形用户界面&am…...

编程日记 2025/8/22 8:07:47

基于编译器特性浅析C++程序性能优化

最近在恶补计算机基础知识&#xff0c;学到CSAPP第五章的内容&#xff0c;在这里总结并且展开一下C程序性能优化相关的内容。 衡量程序性能的方式 一般而言&#xff0c;程序的性能可以用CPE&#xff08;Cycles Per Element&#xff09;来衡量&#xff0c;其指的是处理每个元素…...

编程日记 2025/8/25 21:18:53

在 Docker 中搭建GBase 8s主备集群环境

本文介绍了如何在同一台机器上使用 Docker 容器搭建GBase 8s主备集群环境。 拉取镜像 拉取GBase 8s的最新镜像 docker pull liaosnet/gbase8s或者docker pull liaosnet/gbase8s:v8.8_3513x25_csdk_x64注&#xff1a;在tag为v8.8_3513x25_csdk_x64及之后的版本中&#xff0c;…...

编程日记 2025/8/21 19:30:40

hadoop集群环境配置

目录 VMware虚拟机安装 Xshell安装 网络问题 centos7下载 ---------参考以下视频步骤进行生态搭建---------- 搭建好hadoop01 克隆出hadoop02、hadoop03 启动三台虚拟机 打开终端 输入 记录下各个ip 打开Xshell&#xff0c;新建会话 修改主机名 配置静态IP 主机名称…...

编程日记 2025/8/22 19:48:43

Hive-优化（参数优化篇）

map 数和reduce数 控制hive任务中的map数 合适的map数&#xff0c;会让资源分配的更平均&#xff0c;让我们的代码运行更快&#xff0c;通常情况下&#xff0c;作业会通过input的目录产生一个或者多个map任务。我们可以通过调整参数来控制运行过程中的map数。 Hive Map的数量…...

编程日记 2025/8/23 20:51:39

深度学习｜MAE技术全景图：自监督学习的“掩码魔法“如何重塑AI基础

一、引言&#xff1a;深度学习的困境与自监督的曙光 深度学习&#xff08;Deep Learning&#xff09;无疑是当今人工智能领域基础中的基础。从图像识别到自然语言处理&#xff08;NLP&#xff09;&#xff0c;它在无数任务中展现了卓越性能。例如&#xff0c;在安防监控中&…...

编程日记 2025/8/22 4:53:22

学习threejs，使用LineBasicMaterial基础线材质

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.LineBasicMaterial1.…...

编程日记 2025/8/24 15:01:25

第本章：go 切片

注意&#xff1a;　切片必须要初始化　才能使用　&#xff0c;切片是引用类型 a :[]int{} // 这上叫始化 此时并没有申请内存 // 如果要追加值的话&#xff1a;　append ints : append(a, 1, 2, 3)a : make([]int,5) // 声明切片类型var a []string //声明一…...

编程日记 2025/8/24 13:32:02

dify + ollama + deepseek-r1+ stable-diffusion 构建绘画智能体

故事背景 stable-diffusion 集成进 dify 后&#xff0c;我们搭建一个小智能体&#xff0c;验证下文生图功能 业务流程 #mermaid-svg-6nSwwp69eMizP6bt {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-6nSwwp69eMiz…...

编程日记 2025/8/18 1:51:12

Java基础面试题全集

1. Java语言基础 1.1 Java是什么&#xff1f; • Java是一种广泛使用的编程语言&#xff0c;最初由Sun Microsystems&#xff08;现为Oracle公司的一部分&#xff09;于1995年发布。它是一种面向对象的、基于类的、通用型的编程语言&#xff0c;旨在让应用程序“编写一次&…...

编程日记 2025/8/24 19:02:15

基于multisim的自动干手器设计与仿真

1 设计的任务与要求 设计一个输出 5V 的直流稳压电源。用开关的闭合模拟手挡住光线的功能。用灯的亮灭模拟烘干吹风功能。 2 方案论证与选择 2.1 自动干手器的系统方案 本设计由5V直流电源、红外发射电路、红外接收电路、灯模拟电路构成。 1. 5V直流电源系统 这一部分是整…...

编程日记 2025/8/23 7:36:29

three.js 在 webGL 添加纹理

在我们生成了3D设计之后&#xff0c;我们可以添加纹理使其更加吸引人。在 webGL 和 p5.js中&#xff0c;可以使用 gl.texImage2D() 和 texture() API来为形状应用纹理。 使用 webGL 在 webGL 中&#xff0c;gl.texImage2D() 函数用于从图像文件生成2D纹理。该函数接受许多参…...

编程日记 2025/8/25 13:58:50

Docker 部署 MongoDB 并持久化数据

Docker 部署 MongoDB 并持久化数据 在现代开发中&#xff0c;MongoDB 作为 NoSQL 数据库广泛应用&#xff0c;而 Docker 则提供了高效的容器化方案。本教程将介绍如何使用 Docker 快速部署 MongoDB&#xff0c;并实现数据持久化&#xff0c;确保数据不会因容器重启或删除而丢失…...

编程日记 2025/8/25 1:50:11

SpringBoot优雅关机，监听关机事件，docker配置

Spring Boot 提供了多种方法来实现优雅停机&#xff08;Graceful Shutdown&#xff09;&#xff0c;这意味着在关闭应用程序之前&#xff0c;它会等待当前正在处理的请求完成&#xff0c;并且不再接受新的请求。 一、优雅停机的基本概念 优雅停机的主要步骤如下&#xff1a; …...

编程日记 2025/8/22 5:21:46

网络基础（一）【网络发展/认识协议/网络 VS 系统/以太网通信原理/重谈协议/网络中的地址管理】

网络基础&#xff08;一&#xff09; 1. 网络的发展2. 认识协议3. 网络 VS 系统4. 以太网通信原理5. 重谈协议6. 网络中的地址管理 1. 网络的发展 最开始时&#xff0c;计算机之间相互独立。 但是为了协作完成一些任务&#xff0c;就产生了计算机之间相互通讯的需求&#xff0c…...

编程日记 2025/8/16 11:43:55

PostgreSQL、SQL Server和MySQL数据库性能调优与故障排除技术

通过结合具体技术特性与工具链的深度使用&#xff0c;可系统化提升数据库性能和稳定性。建议根据实际负载特征制定监控-分析-优化的闭环管理流程。 数据库技术&#xff1a; PostgreSQL 13&#xff1a;逻辑复制、分区表、并行查询、监控工具&#xff08;如pg_stat_statements、…...

编程日记 2025/8/24 19:12:24

本地YARN集群部署

请先完成HDFS的前置部署&#xff0c;部署方式可查看:本地部署HDFS集群https://blog.csdn.net/m0_73641796/article/details/145998092?spm1001.2014.3001.5502 部署说明 组件配置文件启动进程备注Hadoop HDFS需修改 需启动: NameNode作为主节点 DataNode作为从节点 Secondary…...

编程日记 2025/8/23 14:52:49

Redis数据结构——list

目录 列表命令 lpush lrange lpushx rpush rpushx lpop rpop lindex linsert llen lrem ltrim lset blpop / brpop 命令总结 编码方式 list相当于数组或者顺序表,但并不是简单的数组&#xff0c;更接近于C中的"双端队列"(deque)。 最左侧的下标…...

编程日记 2025/8/22 12:09:16