Question

我正在使用Foundation 6，并希望将Flexbox类应用于行和列，如文档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类，没有任何影响，例如：

  <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＆amp; foundation-float-classes并取消注释foundation-flex-grid＆amp; foundation-flex-classes

如何让Zurb Foundation的flexbox课程运作起来？

1 个答案: