Zurb 基金会 flex 网格问题

Question

我正在使用 zurb foundation v.6，它是 flex 网格而不是使用浮动的普通网格。我制作了一个页脚，其中有 2 个 div，我希望每个 div 都对齐到自己的末端。这是代码：

<footer id="footer">
  <div class="row align-justify align-middle">
    <div class="column small-6">
      Adresse, org. nr, lenke til kontakt
    </div>
    <div class="column small-6">
      <img src="/img/facebook.svg">
      <img src="/img/twitter.svg">
    </div>
  </div>
</footer>

这是它的css：

#footer {
  height: 4rem;
  position: relative;
  z-index: 1;
  background-color: $gray;

  .social-links {
    display: flex;
    justify-content: flex-end;
  }
}

我遇到的问题是页脚没有占用 4rem 的高度，它只占用图像的高度。我该如何解决？

Answer 1

添加css

.align-middle {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  align-items:center;
  height:100%;
}

#footer {
  height: 4rem;
  position: relative;
  z-index: 1;
  background-color: #ddd;
}

.social-links {
  display: flex;
  justify-content: flex-end;
}

.align-middle {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  align-items:center;
  height:100%;
}

<footer id="footer">
  <div class="row align-justify align-middle">
    <div class="column small-6">
      Adresse, org. nr, lenke til kontakt
    </div>
    <div class="column small-6">
      <img src="/img/facebook.svg">
      <img src="/img/twitter.svg">
    </div>
  </div>
</footer>

Zurb 基金会 flex 网格问题

Zurb foundation flex grid issues

html

css

flexbox

zurb-foundation-6