当 Grid 过早换行（在 11 行而不是 12 行之后）时 Primeflex Flexgrid 的 CSS 修复？答案

【问题标题】：CSS Fix for Primeflex Flexgrid when Grid wraps to new line too early (after 11 rows instead of 12)?当 Grid 过早换行（在 11 行而不是 12 行之后）时 Primeflex Flexgrid 的 CSS 修复？
【发布时间】：2019-12-15 20:38:31
【问题描述】：

我正在根据documentation 使用 Primeflex Flexgrid，但它会在 11 行后换行到新行，而只有在使用 12 行时才应该换行。有人可以解决这个问题吗？ package.json 中的版本：“primeflex”：“^1.0.0-rc.1”，

我在我的 angular.json 中包含了“node_modules/primeflex/primeflex.css”，否则它根本不会包装任何东西，所以这不是问题。我怀疑问题出在图书馆的某个地方，但我太新手了（还）找不到解决方案，我自己只是用 SCSS 类覆盖它。我还在 Primflexes Github 上发现了一个存在的问题，但是另一个用户报告的解决方案没有得到很好的解释，让我无法理解。

查看我的Stackblitz 演示问题。

我希望它能够像 this 一样工作（抱歉，图片链接，但显然我不够聪明，无法正确包含图片）。

另外，如果有更多 Rep 的人可以添加标签“Primflex”，那就太好了。

【问题讨论】：

这是库的问题。我会建议你使用 FlexGrid (flexboxgrid.com)。
很遗憾我不能，因为使用 PrimeNG 及其相关库是我公司的政策。
你试过 box-sizzing 吗？
正如我在问题中所说，我是 (s)CSS 的新手。你的意思是像“box-sizing:border-box;”这样的东西吗？
flex grid not working for p-col-# primeng Angular 5的可能重复

标签： css angular sass flexbox primeng

【解决方案1】：

进行此更改，它将解决您的问题。只需添加box-sizing: border-box;

【讨论】：

谢谢，这为我指明了正确的方向。不过，我不得不稍微修改一下，因为您的回答给了我“什么”，而不是“如何”，所以我将添加我的步骤作为附加答案，但保持您的接受。
如果您遇到任何问题，请告诉我。

【解决方案2】：

由于可能不是每个人都知道如何处理我标记为已接受的答案，因此我根据@piyush jain 的建议添加了关于我如何实现修复的描述。我就是这样做的：

我创建了一个新的 SCSS 文件“_flexgridfix.scss”
我将文件放在 src 文件夹中的 同一级别，其中“styles.scss”是
然后我在文件中添加了 piyush jains 代码（只有 scss 类名和值“box-sizing:border-box;”，而不是其他值，不需要它们）
然后我在“styles.scss”中导入了新的 scss 文件，如下所示： @import "flexgridfix.scss";

注意：我必须在开头使用下划线“_”明确命名新文件，否则 Visual Studio Code 无法正确解析导入。就像一个魅力，它现在可以正确包装。

编辑：显然它现在已修复：请参阅https://github.com/primefaces/primeflex/issues/8#issuecomment-539873278

【讨论】：