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

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

news 2026/5/22 16:37:47

文章目录

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

问题

最近在开发项目的过程中，发现了一个有趣的事情，与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排布，有滚动条时，拖动滚动条无法完整显示内容

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

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

Workbox使用分享

一、简要介绍 1.1 什么是Workbox 官方文档原文： 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 - 力扣（LeetCode） 通过做差可以得到利润序列，然后只要利润需求的非负数求和就可以，因为这里没有手续费，某天买入之后买出可以等价为这几天连续买入卖出 class Solution:def maxProfit(se…...

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

Python状态模式介绍、使用

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

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

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

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

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

Spring AOP API详解

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

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

分治法 Divide and Conquer

1.分治法分治法（Divide and Conquer）是一种常见的算法设计思想，它将一个大问题分解成若干个子问题，递归地解决每个子问题，最后将子问题的解合并起来得到整个问题的解。分治法通常包含三个步骤： 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)])在这段代码中，super(Module_ModuleList, self).__init__() 的作用是调用父类 nn.Module 的 __init__ 方法&…...

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

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

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

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

java基础复习(第二日)

java基础复习(二) 1.抽象的（abstract）方法是否可同时是静态的（static），是否可同时是本地方法（native），是否可同时被 synchronized修饰？ 都不能。抽象方法需要子类重写…...

编程日记 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-填充每个节点的下一个右侧节点指针

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

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

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

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

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

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

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

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

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

AI技术正在迅速发展，渗透到我们的生活中，尤其在内容营销领域。 AI算法帮助我们生成文本、优化搜索引擎排名，提升用户体验等，这些创新正在塑造时代的前进方向，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 分支名称。但是，它们之间有一些不同点： git branch --show-current 命令是 G…...

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

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

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

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

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

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

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

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

🌷🍁 博主猫头虎带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》文章图文并茂🦕生动形象🦖简单易学！欢迎大家来踩踩~🌺 &a…...

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

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

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

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

Apache Doris多模态能力深度解析：从技术架构到大厂落地实践

这篇文章是个人的学习总结，AI时代下的Doris在多模态能力的支持上越来越完善，个人总结了背景、技术方案以及各大公司落地场景，方便查阅，大家可以点击收藏。前言Apache Doris 4.0正式引入原生向量索引、AI 函数与混合检索能力&#…...

编程新知 2026/5/22 16:08:36

收藏！2026大模型风口来了，小白程序员如何抓住高薪机会？必看！

文章指出2026年是技术红利年，大模型领域竞争格局变化明显。国内开源模型如DeepSeek、GLM等取得巨大进展，领先全球。从业者待遇提升，应届生薪酬普遍破百万。招聘方更看重新技能，如万亿MoE、Agent等。文章强调AGI的核心是通用性&…...

编程新知 2026/5/22 15:32:29

三分钟永久备份你的QQ空间：告别数据丢失的终极解决方案

三分钟永久备份你的QQ空间：告别数据丢失的终极解决方案【免费下载链接】QZoneExport QQ空间导出助手，用于备份QQ空间的说说、日志、私密日记、相册、视频、留言板、QQ好友、收藏夹、分享、最近访客为文件，便于迁移与保存项目地址: https:…...

编程新知 2026/5/22 14:18:22

Office自定义界面编辑器：打造你的专属Office工作台

Office自定义界面编辑器：打造你的专属Office工作台【免费下载链接】office-custom-ui-editor Standalone tool to edit custom UI part of Office open document file format 项目地址: https://gitcode.com/gh_mirrors/of/office-custom-ui-editor 你是否厌…...

编程新知 2026/5/22 14:10:04

【全新 v 2.7.5 版本】Open Claw 本地环境一键部署教程

前言 2026 年开源圈爆火的「数字员工」OpenClaw（昵称小龙虾），GitHub 星标狂揽 28 万 ，凭「本地运行零代码操作自动干活」的核心优势圈粉无数！很多人误以为它是普通聊天 AI，实则是能真正操控电脑的自动…...

编程新知 2026/5/22 12:22:17

惠普tank 2606屏幕显示 er-08 ，加了粉还是报错er08,黄灯闪烁成像鼓接近寿命期限？亲测完美修复。

下载：点这里下载备用下载：https://pan.baidu.com/s/1J7PN4m4fbIzku9DqBFg_nw?pwd0000...

编程新知 2026/5/22 11:42:38

手把手教你用USB ISP下载器给Arduino Nano烧写Bootloader（含ProgISP软件详细配置）

手把手教你用USB ISP下载器为Arduino Nano烧录Bootloader 当你拿到一块全新的Arduino Nano开发板，或是遇到程序无法上传的"变砖"情况时，很可能需要重新烧写Bootloader。Bootloader是存储在微控制器中的一小段特殊程序，它负责与Ard…...

编程新知 2026/5/22 11:16:17

炉石佣兵战记自动化脚本：5分钟实现游戏全自动化的终极指南

炉石佣兵战记自动化脚本：5分钟实现游戏全自动化的终极指南【免费下载链接】lushi_script This script is to save your time from Mercenaries mode of Hearthstone 项目地址: https://gitcode.com/gh_mirrors/lu/lushi_script 还在为《炉石传说》佣兵战记模…...

编程新知 2026/5/22 10:26:00

5步实现《鸣潮》游戏体验全面升级：WuWa-Mod模组高效部署指南

5步实现《鸣潮》游戏体验全面升级：WuWa-Mod模组高效部署指南【免费下载链接】wuwa-mod Wuthering Waves pak mods 项目地址: https://gitcode.com/GitHub_Trending/wu/wuwa-mod 还在为《鸣潮》游戏中的技能冷却、体力限制和繁琐操作而烦恼吗？WuW…...

编程新知 2026/5/22 10:00:39

哔哩下载姬DownKyi：新手也能快速上手的B站视频下载解决方案

哔哩下载姬DownKyi：新手也能快速上手的B站视频下载解决方案【免费下载链接】downkyi 哔哩下载姬downkyi，哔哩哔哩网站视频下载工具，支持批量下载，支持8K、HDR、杜比视界，提供工具箱（音视频提取、去水印等&…...

编程新知 2026/5/22 8:46:27

文章目录

问题

示例代码

解决问题

改进后的效果

相关文章：