如何让 Zurb Foundation 的 flexbox 类 工作？

Question

我正在使用 Foundation 6 并希望将 Flexbox classes 应用于行和列，如文档 here.

中所述

我的 HTML 看起来像：

<div class="row header align-middle">
  <div class="large-5 columns">
    <div class="header__title">
      <h1>Title</h1>
    </div>
  </div>
  <div class="large-7 columns search-form">
    <form>etc</form>
  </div>
</div>

但我在这里一无所获。我还尝试在列元素上使用 align-self-middle class，但没有影响，例如：

  <div class="large-7 columns search-form align-self-middle">

并尝试了两者的结合。

在检查器中，我确实看到从 framework.css 应用了一些样式，例如：

.align-middle {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

有人知道我需要什么才能让它工作吗？

Answer 1

如果您使用的是 scss 版本，在 app.scss 中有以下内容。

// @include foundation-grid;
@include foundation-flex-grid; 

//@include foundation-float-classes;
@include foundation-flex-classes;

注释掉 foundation-grid & foundation-float-classes 并取消注释 foundation-flex-grid & foundation-flex-classes