使用 scss 的基础 flexbox 问题

Posted 2023-03-07

【中文标题】使用 scss 的基础 flexbox 问题

【英文标题】：Foundation flexbox issue using scss

【发布时间】：2017-05-28 02:06:55

【问题描述】：

.test 
  @include flex-grid-row();
  .eight  @include flex-grid-column(8); 
  .four  @include flex-grid-column(4); 




 <div class="test">
    <div class="eight" style="background: red; height: 150px;"></div>
    <div class="four" style="background: blue; height: 150px;"></div>
 </div>

鉴于上面的代码，为什么网格堆叠而不是并排显示？如果我从 flex-grid-column() 中删除 4，那么会按我的预期显示，因为 .four 占用了所有可用空间，但是如果我指定有多少列，为什么不呢？

【参考方案1】：

标记看起来正确并且在我的 flex 项目中效果很好。 您可以确保在 app.scss 中设置了 flex-grid

[] 和

【讨论】：

问题是我使用 npm 安装并链接到资源：

对不起，应该说我在 node_modules 中链接到它，以便我可以管理依赖项。我看不到以这种方式使用它的方式切换网格？

【参考方案2】：

通过 npm @import "node_modules/foundation-sites/scss/foundation.scss"; 导入 Foundation 后，我需要将 @include foundation-everything(true); 传递 true 开关到 flexbox。

我在此页面上发现了这一点 http://foundation.zurb.com/sites/docs/flexbox.html#enabling-flexbox-mode