CSS 将最后一个 flex 项目放置在容器的末尾

Position last flex item at the end of container

提问by George Mauer

This question concerns a browser with full css3 support including flexbox.

此问题涉及具有完整 css3 支持（包括 flexbox）的浏览器。

I have a flex container with some items in it. They are all justified to flex-start but I want the last.enditem to be justified to flex-end. Is there a good way to do this without modifying the HTML and without resorting to absolute positioning?

我有一个 flex 容器，里面有一些项目。它们都适用于 flex-start，但我希望最后.end一项适用于 flex-end。在不修改 HTML 和不诉诸绝对定位的情况下，有没有一种好方法可以做到这一点？

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

回答by Josh Crozier

Flexible Box Layout Module - 8.1. Aligning with auto margins

Auto margins on flex items have an effect very similar to auto margins in block flow:

• During calculations of flex bases and flexible lengths, auto margins are treated as 0.

• Prior to alignment via justify-contentand align-self, any positive free space is distributed to auto margins in that dimension.

灵活的盒子布局模块 - 8.1。与自动边距对齐

弹性项目上的自动边距的效果与块流中的自动边距非常相似：

• 在计算弹性基数和弹性长度时，自动边距被视为 0。

• 在通过justify-content和对齐之前align-self，任何正自由空间都会分配到该维度的自动边距。

Therefore you could use margin-top: autoto distribute the space between the other elements and the last element.

因此，您可以使用margin-top: auto来分配其他元素和最后一个元素之间的空间。

This will position the last element at the bottom.

这会将最后一个元素定位在底部。

p:last-of-type {
  margin-top: auto;
}

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;
}
p {
  height: 30px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-top: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
</div>

---

---

Likewise, you can also use margin-left: autoor margin-right: autofor the same alignment horizontally.

同样，您也可以将margin-left: auto或margin-right: auto用于相同的水平对齐方式。

p:last-of-type {
  margin-left: auto;
}

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}
p {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

回答by David Ben Dahan

This flexbox principle also works horizontally

这个 flexbox 原理也适用于水平方向

During calculations of flex bases and flexible lengths, auto margins are treated as 0.
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

在计算弹性基数和弹性长度时，自动边距被视为 0。
在通过 justify-content 和 align-self 对齐之前，任何正的自由空间都会分配到该维度的自动边距。

Setting an automatic left margin for the Last Item will do the work.

为最后一项设置自动左边距将完成这项工作。

.last-item {
  margin-left: auto;
}

Code Example:

代码示例：

.container {
  display: flex;
  width: 400px;
  outline: 1px solid black;
}

p {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: blue;
}

.last-item {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="last-item"></p>
</div>

Codepen Snippet

代码笔片段

This can be very useful for Desktop Footers.

这对于桌面页脚非常有用。

As Envatodid here with the company logo.

正如Envato在这里使用公司徽标所做的那样。

Codepen Snippet

代码笔片段