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元素与另一个弹性框包装起来，使其“有点”。

请参阅此fiddle。

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

1 个答案: