带有底部锚定元素的 CSS flexbox 垂直堆栈

Question

如何使用 flexbox 布局创建一个垂直堆栈(列)的 div，其中一个 div 锚定到容器底部？

|--------|
|  div1  |
|  div2  |
|  div3  |
|        |
|        |
|        |
| fixed1 |
|--------|

例如，在这个 fiddle我希望元素 1、2 和 3 水平居中并垂直对齐到顶部，固定元素水平居中并垂直对齐到底部。

HTML

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="fixed">Fixed Item</div>
</div>

CSS

html, body {
    min-height: 100%;
    height: 100%;
}

.container {
    height: 50%;
    background: #EEE;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: center;
}

.fixed {
    align-self: flex-end;
}

Answer 1

这有点棘手，因为似乎 align-self仅适用于 flex-direction:row .

我确实设法通过包装你的.fixed让它“有点”工作。带有另一个 flexbox 的元素。

看到这个fiddle .