在 flexbox 内的容器底部对齐元素

Question

Fiddle here.

我正在尝试将白色插入符号 (^) 粘贴到 .section-1 的底部，水平居中但位于最底部。如您所见，插入符号本身位于 Bootstrap container-fluid 内，而 Bootstrap container-fluid 本身位于 flex-box 内（通过 vertical-center 类应用）。

我尝试过使用边距和bottom: 0; 等进行传统定位，但无济于事。同样，flex-end 属性也没有像我想象的那样工作。欢迎所有解决方案和建议，只要他们继续使用 flexbox。

Answer 1

您可以使用嵌套的弹性容器来实现这一点。

HTML

<!-- one adjustment; add span -->
<div class="align-me-center"><span>Here is some centered text.</span></div>

CSS

/* ADJUSTMENT TO RULE */

.section-1 {
    min-height: 500px;
    background-color: #0099cc;
    height: 500px; /* necessary for child div with percentage height to work;
                      min-height overrides height, so no worries */
}

/* NEW RULES */

.container-fluid { 
    display: flex; /* establish nested flex container */
    flex-direction: column;
    height: 100%; /* use full height of container */
    justify-content: center; /* position flex items at opposite end of container */
}

.align-me-center { 
    display: flex; /* nested flex container to center flex item (span) */
    align-items: center;
    justify-content: center; 
    height: 100%;
}

演示：http://jsfiddle.net/b26j5m6t/3/