为什么 Flex 项目不通过边距和“边框”大小缩小以适应每行三个？
发布于2024-11-17
浏览：505
Flex 项目忽略边距和边框大小
在 Flexbox 中，通过设置 flex: 1 1 33.33% 和 margin: 10px on flex物品，人们可能期望每排三个盒子。然而，使用 flex-wrap:wrap 时，盒子不会缩小到每行三个。
原因在于 box-sizing: border-box 的本质。虽然此属性在宽度和高度计算中包括填充和边框，但不包括边距。边距是单独计算的，默认情况下，Flex 项目具有 flex-shrink: 1，允许它们缩小以适合容器。
要解决此问题，可以通过设置 flex- 来覆盖默认行为Shrink: 0。这可以防止 Flex 项目收缩到边缘。
另一个解决方案是在保持 Flex-Grow: 1 的同时调整 Flex-Basis 值。因为不需要flex-basis 强制换行，由于 flex-grow 消耗可用空间，可以减小该值以容纳边距。例如，通过设置 flex: 1 1 26% 和 margin: 10px，flex 项目现在可以按预期调整。
最新教程
更多>
-
为什么 Python 会抛出“ValueError：尝试相对导入超出顶级包”错误，以及如何避免？顶级包之外的相对导入在多级 Python 包中尝试相对导入时，从包目录运行模块可能会导致“ValueError：尝试相对导入超出顶级包”错误。了解此错误背后的原因对于有效的包管理至关重要。发生该错误的原因是 Python 不维护包加载位置的记录。以“python -m test_A.test”执行模...编程 发布于2024-11-17 -
如何在 Java 中创建二维数组的真实副本而不产生意想不到的后果？在 Java 中有效复制二维数组使用二维数组时，通常需要创建原始数组以保留其原始值。然而，像old = current这样的直接赋值可能会导致意想不到的后果。理解Java数组赋值在Java中，数组是对象，数组之间的赋值是引用到同一个底层数组。因此，更新一个数组会影响另一个数组，因为它们都指向相同的数...编程 发布于2024-11-17
-
如何从两个键和值数组创建 JavaScript 对象？从键和值数组构造一个对象你有两个数组，newParamArr和paramVal，你的目标是创建一个JavaScript对象将这些数组中的元素配对。对象中的每个键都应该对应 newParamArr 中的一个元素，并且关联的值应该来自 paramVal。例如，如果 newParamArr 包含 [&qu...编程 发布于2024-11-17
-
如何增加 MySQL 中 VARCHAR 列的大小？修改 MySQL 表中的列大小您可能会遇到类似于问题中描述的情况，您错误地设置了表列的大小不合适。在本例中，用户定义了长度为 300 的 VARCHAR 列，而不是最大长度 65353。使用 MySQL 的 ALTER TABLE 语句可以轻松解决此问题。ALTER TABLE 语句允许您修改现有表...编程 发布于2024-11-17
-
如何在生产环境中将本地 MySQL 数据库连接到容器化应用程序？用于本地生产部署的 Docker 数据库连接选项在生产环境中，您可能更喜欢使用本地托管的 MySQL 数据库，而不是容器化数据库。如果您的 Docker-compose.yml 设置镜像了上面提供的，您可以无缝连接到本地数据库。使用 Docker 连接到本地 MySQL 数据库连接您的本地 MySQ...编程 发布于2024-11-17
-
利用 Python 实现数据输入自动化：开发人员指南数据输入虽然通常被认为是平凡的，但对于维护业务记录至关重要。但在自动化时代，开发人员可以在改变公司处理大量数据的方式方面发挥关键作用。 Python 拥有庞大的库生态系统，提供了强大的工具来自动执行数据输入任务，减少人为错误并提高效率。 为什么使用 Python 自动输入数据？ Py...编程 发布于2024-11-17
-
如何使用 MySQL 查找今天生日的用户？如何使用 MySQL 识别今天生日的用户使用 MySQL 确定今天是否是用户的生日涉及查找生日匹配的所有行今天的日期。这可以通过一个简单的 MySQL 查询来实现，该查询将存储为 UNIX 时间戳的生日与今天的日期进行比较。以下 SQL 查询将获取今天有生日的所有用户： FROM USERS ...编程 发布于2024-11-17
-
如何使用 CSS 创建带边框的透明三角形？使用 CSS 制作带边框的透明三角形用 CSS 创建复杂的形状可能具有挑战性，但是对于三角形，有多种方法可以实现您想要的效果效果。您已经尝试过的一种方法涉及利用边框。虽然这种技术有效，但它依赖于视觉技巧。有没有更优雅的解决方案？是的，有！ Webkit 独有的方法涉及利用 Unicode 字符 U ...编程 发布于2024-11-17
-
如何在不加表锁的情况下在大型MySQL生产表上创建索引？如何在不加表锁的情况下在大型MySQL生产表上创建索引问题背景： 在大型 MySQL 表上创建索引可能是一项艰巨的任务，尤其是在不间断访问至关重要的生产环境中。传统的 CREATE INDEX 语句可能会导致完全表锁定，从而阻塞所有并发操作。MySQL 版本注意事项：在 MySQL 5.6 及更高版...编程 发布于2024-11-17
-
使用express-fast-json-stringify 增强 Express.js 中的 JSON 序列化性能JSON 序列化是 Web 开发中的一项关键任务，特别是对于使用 Node.js 和 Express.js 构建的应用程序。虽然 Node.js 中的原生 JSON 序列化 (JSON.stringify()) 简单且方便，但它可能成为性能瓶颈，尤其是在重负载下。本文介绍了express-fast-...编程 发布于2024-11-17
-
为什么 Go 的 `encoding/csv` 包向 CSV 文件中的引用字符串添加额外的引号？对 Go 中引用字符串的特殊 CSV 结果进行故障排除 Encoding/CSVGo 中的encoding/csv 包一直是有关处理引用字符串的很多争论的主题在 CSV 文件中。本文旨在通过探索用户在将带引号的字符串写入 CSV 文件时遇到额外引号所观察到的有趣现象来阐明该问题。额外引号之谜用户提供...编程 发布于2024-11-17
-
除了“if”语句之外：还有哪些地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型？无需强制转换即可上下文转换为 bool您的类定义了对 bool 的显式转换，使您能够在条件语句中直接使用其实例“t”。然而，这种显式转换提出了一个问题：“t”在哪里可以在不进行强制转换的情况下用作 bool？上下文转换场景C 标准指定了四种值可以根据上下文转换为 bool 的主要场景：语句：if、w...编程 发布于2024-11-17
-
如何使用 Unicode 来显示具有“far”和“fas”类的 Font Awesome 5 星图标？Font Awesome 5 星图标的 Unicode：使用“far”和“fas”类Font Awesome 5 提供常规和实体星形图标，两者均由 Unicode 值“\f005”表示。要在评级系统中利用这些变化，您可以利用 CSS 在“far”和“fas”类之间切换。“fas”类代表实心星星，而“...编程 发布于2024-11-17
-
在 Go 中使用 WebSocket 进行实时通信构建需要实时更新的应用程序（例如聊天应用程序、实时通知或协作工具）需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方！今天，我们将探讨如何在 Go 中使用 WebSocket，以便您可以向应用程序添加实时功能。 在这篇文章中，我们将介绍： WebSoc...编程 发布于2024-11-17
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
