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

【问题标题】：CSS flexbox vertical stack with bottom-anchored element带有底部锚定元素的 CSS flexbox 垂直堆栈
【发布时间】：2015-07-10 15:52:18
【问题描述】：

如何使用 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;
}

【问题讨论】：

标签： css flexbox

【解决方案1】：

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

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

看到这个fiddle。

【讨论】：

你能把所有项目都水平居中放在主 div 中吗？