将最后一个弹性项目放在容器的末尾

Question

此问题涉及具有完整css3支持的浏览器,包括flexbox.

我有一个Flex容器,里面有一些物品.他们都有理由灵活启动,但我希望最后一个 .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>

Answer 1

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

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

• 在计算柔性基础和弹性长度期间,自动边距被视为0.

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

因此,您可以使用它margin-top: auto来分配其他元素和最后一个元素之间的空间.这会将元素定位在底部.

.end {
  margin-top: auto;
}

您还可以避免使用类并使用:last-of-type/ last-childpseudo类.

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

.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;
}
.end {
  margin-top: auto;
}

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

Answer 2

此Flexbox Principal也可以水平工作

在计算柔性基础和灵活长度期间,自动边距被视为0.
在通过justify-content和align-self进行对齐之前,任何正自由空间都会分配到该维度中的自动边距.

为Last Item设置自动左边距将完成工作.

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

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

正如恩瓦托在这里用公司标志做的那样.

Codepen代码段