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

flex盒子 center排布，有滚动条时，拖动滚动条无法完整显示内容

news 2026/2/10 3:28:32

文章目录

    • 问题
    • 示例代码
    • 解决问题
    • 改进后的效果

问题

最近在开发项目的过程中，发现了一个有趣的事情，与flex盒子有关，不知道算不算是一个bug，不过对于开发者来说，确实有些不方便，感兴趣的同学不妨也去试试。

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: #fff;}</style>
</head><body><div class="flex"><div class="flex-content-item">simpledengxi</div><div class="flex-content-item">simpledengxi</div><div class="flex-content-item">simpledengxi</div><div class="flex-content-item">simpledengxi</div><div class="flex-content-item">simpledengxi</div><div class="flex-content-item">simpledengxi</div></div>
</body>
</html><style>.flex {display: flex;width: 150px;overflow: auto;justify-content: center;background: yellowgreen;margin: 0 auto;}.flex-content-item {padding: 20px;}
</style>

示例效果
在这里插入图片描述
滚动条已经拉到了最左边，但是左边的内容并没有完整显示。
目前flex盒子会出现这个问题的原因无从知晓，只有当以下条件同时满足时，才会这样：display: flex; justify-content: center; 有与flex-direction方向一致的滚动条出现；

解决问题

为了解决显示不完全的问题，我只能放弃使用flex盒子，通过display:inline-block来实现横向排列，并且不允许盒子换行。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: #fff;}</style>
</head><body><div class="flex"><div class="flex-content-item">simpledengxi</div><div class="flex-content-item">simpledengxi</div><div class="flex-content-item">simpledengxi</div><div class="flex-content-item">simpledengxi</div><div class="flex-content-item">simpledengxi</div><div class="flex-content-item">simpledengxi</div></div>
</body></html><style>.flex {width: 150px;/* 还是优先中间排布 */text-align: center;background: yellowgreen;margin: 0 auto;/* 仍然需要滚动条 */overflow: auto;/* 不允许字体换行，这样就必定会出现滚动条 */word-break: keep-all;white-space: nowrap;}.flex-content-item {padding: 20px;/* 里面的盒子必须是inline-block或者inline 否则 text-align: center 不生效 */display: inline-block;}
</style>

改进后的效果

在这里插入图片描述

相关文章：

flex盒子 center排布，有滚动条时，拖动滚动条无法完整显示内容

文章目录 问题示例代码解决问题改进后的效果 问题 最近在开发项目的过程中&#xff0c;发现了一个有趣的事情&#xff0c;与flex盒子有关&#xff0c;不知道算不算是一个bug&#xff0c;不过对于开发者来说&#xff0c;确实有些不方便&#xff0c;感兴趣的同学不妨也去试试。 …...

编程日记 2023/7/31 22:09:40

Workbox使用分享

一、简要介绍 1.1 什么是Workbox 官方文档原文&#xff1a; At this point, service workers may seem tricky. There’s lots of complex interactions that are hard to get right. Network requests! Caching strategies! Cache management! Precaching! It’s a lot to r…...

编程日记 2023/7/31 22:08:39

秋招算法备战第32天 | 122.买卖股票的最佳时机II、55. 跳跃游戏、45.跳跃游戏II

122. 买卖股票的最佳时机 II - 力扣&#xff08;LeetCode&#xff09; 通过做差可以得到利润序列&#xff0c;然后只要利润需求的非负数求和就可以&#xff0c;因为这里没有手续费&#xff0c;某天买入之后买出可以等价为这几天连续买入卖出 class Solution:def maxProfit(se…...

编程日记 2023/7/31 22:07:38

Python状态模式介绍、使用

一、Python状态模式介绍 Python状态模式&#xff08;State Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许对象在不同的状态下表现不同的行为&#xff0c;从而避免在代码中使用多重条件语句。该模式将状态封装在独立的对象中&#xff0c;并根据当前状态选择不同的…...

编程日记 2023/7/31 22:06:36

Github-Copilot初体验-Pycharm插件的安装与测试

引言&#xff1a; 80%代码秒生成&#xff01;AI神器Copilot大升级 最近copilot又在众多独角兽公司的合力下&#xff0c;取得了重大升级。GitHub Copilot发布还不到两年&#xff0c; 就已经为100多万的开发者&#xff0c;编写了46%的代码&#xff0c;并提高了55%的编码速度。 …...

编程日记 2023/7/31 22:05:36

Spring AOP API详解

上一章介绍了Spring对AOP的支持&#xff0c;包括AspectJ和基于schema的切面定义。在这一章中&#xff0c;我们将讨论低级别的Spring AOP API。对于普通的应用&#xff0c;我们推荐使用前一章中描述的带有AspectJ pointcuts 的Spring AOP。 6.1. Spring 中的 Pointcut API 这一…...

编程日记 2023/7/31 22:04:35

分治法 Divide and Conquer

1.分治法 分治法&#xff08;Divide and Conquer&#xff09;是一种常见的算法设计思想&#xff0c;它将一个大问题分解成若干个子问题&#xff0c;递归地解决每个子问题&#xff0c;最后将子问题的解合并起来得到整个问题的解。分治法通常包含三个步骤&#xff1a; 1. Divid…...

编程日记 2023/7/31 22:03:33

super(Module_ModuleList, self).__init__()的作用是什么？

class Module_ModuleList(nn.Module):def __init__(self):super(Module_ModuleList, self).__init__()self.linears nn.ModuleList([nn.Linear(10, 10)])在这段代码中&#xff0c;super(Module_ModuleList, self).__init__() 的作用是调用父类 nn.Module 的 __init__ 方法&…...

编程日记 2023/7/31 22:02:32

【并发专题】操作系统模型及三级缓存架构

目录 课程内容一、冯诺依曼计算机模型详解1.计算机五大核心组成部分2.CPU内部结构3.CPU缓存结构4.CPU读取存储器数据过程5.CPU为何要有高速缓存 学习总结 课程内容 一、冯诺依曼计算机模型详解 现代计算机模型是基于-冯诺依曼计算机模型 计算机在运行时&#xff0c;先从内存中…...

编程日记 2023/7/31 22:01:30

java基础复习(第二日)

java基础复习(二) 1.抽象的&#xff08;abstract&#xff09;方法是否可同时是静态的&#xff08;static&#xff09;&#xff0c;是否可同时是本地方法&#xff08;native&#xff09;&#xff0c;是否可同时被 synchronized修饰&#xff1f; 都不能。 抽象方法需要子类重写…...

编程日记 2023/7/31 22:00:29

Ansible自动化运维工具

Ansible自动化运维工具 一、ansible介绍二、ansible环境安装部署三、ansible命令行模块1、command模块2、shell模块3、cron模块4、user模块5、group模块6、copy模块7、file模块8、hostname模块9、ping模块10、yum模块11、service/systemd模块12、script模块13、mount模块14、ar…...

编程日记 2023/7/31 21:59:28

LeetCode-116-填充每个节点的下一个右侧节点指针

一&#xff1a;题目描述&#xff1a; 给定一个 完美二叉树 &#xff0c;其所有叶子节点都在同一层&#xff0c;每个父节点都有两个子节点。二叉树定义如下&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; }填充它的每个 next 指针&#xff0c;让这个指…...

编程日记 2023/7/31 21:58:26

前端面试的性能优化部分（3）每篇10题

21.如何优化移动端网页的性能&#xff1f; 优化移动端网页的性能是提升用户体验、降低用户流失的关键。以下是一些优化移动端网页性能的常见方法&#xff1a; 压缩和合并资源&#xff1a; 压缩 CSS、JavaScript 和图片等静态资源&#xff0c;减少文件大小&#xff0c;同时合并…...

编程日记 2023/7/31 21:57:24

如何通过企业工商信息初步判断企业是否靠谱？

银行、投资机构等对企业进行融资、授信、合作时&#xff0c;需要如何评估企业的可靠性。企业工商信息作为企业的基础信息&#xff0c;是初步判断企业是否靠谱的重要依据之一&#xff0c;通过对企业工商信息的综合分析&#xff0c;我们可以了解企业的经营状况、财务实力、法律风…...

编程日记 2023/7/31 21:56:22

ChatGPT+知乎，20分钟超越专业大V的调教方法

AI技术正在迅速发展&#xff0c;渗透到我们的生活中&#xff0c;尤其在内容营销领域。 AI算法帮助我们生成文本、优化搜索引擎排名&#xff0c;提升用户体验等&#xff0c;这些创新正在塑造时代的前进方向&#xff0c;AI也将引领未来十年的变革。对于每个创业者、内容创作者和…...

编程日记 2023/7/31 21:55:20

git branch --show-current 和 git rev-parse --abbrev-ref HEAD 区别

git branch --show-current 和 git rev-parse --abbrev-ref HEAD 区别 git branch --show-current 和 git rev-parse --abbrev-ref HEAD 命令都可以用于获取当前所在的 Git 分支名称。 但是&#xff0c;它们之间有一些不同点&#xff1a; git branch --show-current 命令是 G…...

编程日记 2023/7/31 21:54:19

【TypeScript】接口类型 Interfaces 的使用理解

导语&#xff1a; 什么是 类型接口&#xff1f; 在面向对象语言中&#xff0c;接口&#xff08;Interfaces&#xff09;是一个很重要的概念&#xff0c;它是对行为的抽象&#xff0c;而具体如何行动需要由类&#xff08;classes&#xff09;去实现&#xff08;implement&#x…...

编程日记 2023/7/31 21:53:17

2023-07-31 C语言根据错误号打印详细的错误信息perror（““） 或者strerror(errno)

一、C 语言可以使用perror("perror output"); 或 strerror(errno)打印详细的错误信息。 二、需要的头文件#include <errno.h>。 三、实例测试&#xff0c;这里我让open一个linux 底层杂项设备失败的情况&#xff0c;返回的是一个负数&#xff0c;强制返回-EN…...

编程日记 2023/7/31 21:52:16

JDK17和JDK8完美卸载方法及新版JDK安装教程

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

编程日记 2023/7/31 21:51:13

FPGA设计时序分析二、建立/恢复时间

目录 一、背景知识 1.1 理想时序模型 1.2 实际时序模型 1.2.1 时钟不确定性 1.2.2 触发器特性 二、时序分析 2.1 时序模型图 ​2.2 时序定性分析 一、背景知识 之前的章节提到&#xff0c;时钟对于FPGA的重要性不亚于心脏对于人的重要性&#xff0c;所有的逻辑运算都离开…...

编程日记 2023/7/31 21:50:12

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2026/2/9 15:41:39

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/2/4 17:51:19

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2026/1/25 9:33:23

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2026/2/6 12:27:51

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

编程新知 2025/7/17 8:16:30

表单设计器拖拽对象时添加属性

背景&#xff1a;因为项目需要。自写设计器。遇到的坑在此记录 使用的拖拽组件时vuedraggable。下面放上局部示例截图。 坑1。draggable标签在拖拽时可以获取到被拖拽的对象属性定义 要使用 :clone, 而不是clone。我想应该是因为draggable标签比较特。另外在使用**:clone时要将…...

编程新知 2026/2/6 5:47:40

今日行情明日机会——20250609

上证指数放量上涨&#xff0c;接近3400点&#xff0c;个股涨多跌少。 深证放量上涨&#xff0c;但有个小上影线&#xff0c;相对上证走势更弱。 2025年6月9日涨停股主要行业方向分析&#xff08;基于最新图片数据&#xff09; 1. 医药&#xff08;11家涨停&#xff09; 代表标…...

编程新知 2026/1/27 0:01:56

7种分类数据编码技术详解：从原理到实战

在数据分析和机器学习领域&#xff0c;分类数据&#xff08;Categorical Data&#xff09;的处理是一个基础但至关重要的环节。分类数据指的是由有限数量的离散值组成的数据类型&#xff0c;如性别&#xff08;男/女&#xff09;、颜色&#xff08;红/绿/蓝&#xff09;或产品类…...

编程新知 2026/2/10 0:58:49

Redis——Cluster配置

目录 分片 一、分片的本质与核心价值 二、分片实现方案对比 三、分片算法详解 1. ‌范围分片&#xff08;顺序分片&#xff09;‌ 2. ‌哈希分片‌ 3. ‌虚拟槽分片&#xff08;Redis Cluster 方案&#xff09;‌ 四、Redis Cluster 分片实践要点 五、经典问题解析 C…...

编程新知 2025/12/6 10:14:21