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

我有一个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>

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

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

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

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

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

这会将最后一个元素放置在底部。

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>

同样，您也可以水平使用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>

这种flexbox原理也可以水平运行

在计算弹性基准和弹性长度时，自动页边距被视为0。
通过对齐内容和对齐自身对齐之前，任何正的自由空间都会分配给该维度中的自动页边距。

为“最后一项”设置自动左页边距将完成此工作。

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

代码示例：

.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代码段

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

就像Envato在这里使用公司徽标一样。

Codepen代码段