使用 scss 的 Foundation flexbox 问题

Question

.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 占用了所有可用的 space，但是如果我指定了多少列，为什么不呢？

Answer 1

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

中设置了 flex-grid

[] 和

Answer 2

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

我在这个页面上找到了 http://foundation.zurb.com/sites/docs/flexbox.html#enabling-flexbox-mode

使用 scss 的 Foundation flexbox 问题

Foundation flexbox issue using scss

sass

flexbox

zurb-foundation