基础 6 - 弹性盒子中的行对齐

Question

我试图让两个 div 水平居中，一个在父容器的中间对齐，另一个在父容器的底部对齐。我正在使用带有 Flexbox 版本的 Foundation 6。

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 都出现在同一行。

感谢您的帮助！

Answer 1

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

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>

Answer 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/

基础 6 - 弹性盒子中的行对齐

Foundation 6 - Rows alignement in flex box

html

css

flexbox

zurb-foundation