Foundation 6 - 弹性框中的行对齐答案

【问题标题】：Foundation 6 - Rows alignement in flex boxFoundation 6 - 弹性框中的行对齐
【发布时间】：2017-03-29 16:32:19
【问题描述】：

我正在尝试将两个 div 水平居中，并将一个在父容器的中间对齐，第二个在父容器的底部对齐。我使用的是 Foundation 6，带有 Flexbox 版本。

HTML

<section id="hero">
    <div class="row align-middle align-center">
        <h1>Welcome</h1>
    </div>
    <div class="row align-bottom align-center">
        <p>Some text</p>
    </div>
</section>

CSS

#hero {
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
}

问题是 flex 容器 (#hero) 中的每个 div 都出现在同一行。

感谢您的帮助！

【问题讨论】：

我不了解 Foundation，但只有 flexbox 会是这样的 codepen.io/anon/pen/JWedVV

标签： html css flexbox zurb-foundation

【解决方案1】：

很确定您必须将类列添加到行的子元素中，如下所示：

id="hero">
    <div class="row align-middle align-center">
        <h1 class="column">Welcome</h1>
    </div>
    <div class="row align-bottom align-center">
        <p class="column">Some text</p>
    </div>
</section>

【讨论】：

【解决方案2】：

我终于找到了如何使用 Flexbox 垂直对齐 3 个 div。基金会并不是真正的问题。

我为有同样问题的人做了一个 Js Fiddle：

.wrapper {
    display: flex;
    flex-direction: column;
    height:90vh;
}
.center {
    width: 100%;
    flex-grow: 1;
    align-items: center;
    display:flex;
}
.a {
    width: 100%;
}

 <div class="wrapper">
        <div class="a">Header</div>
        <div class="center">Body</div>
        <div class="a">Footer</div>
</div>

JSFiddle：https://jsfiddle.net/ek38ff5r/20/

【讨论】：