使用 scss 的基础 flexbox 问题答案

【问题标题】：Foundation flexbox issue using scss使用 scss 的基础 flexbox 问题
【发布时间】：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 占用了所有可用空间，但是如果我指定有多少列，为什么不呢？

【问题讨论】：

标签： sass flexbox zurb-foundation

【解决方案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

【讨论】：