将最后一个伸缩项定位在容器的末尾

柔性盒子布局模块- 8.1。与汽车利润同步弹性项目的自动裕度与块流中的自动裕度非常相似: 在计算柔性基和柔性长度时，auto margin被视为0。在通过justify-content和align-self对齐之前，任何正的自由空间都被分配到该维度的自动边距。

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

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

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

.container { 显示:flex; flex-direction:列; 边框:1px实心#000; 最小高度:200 px; 宽度:100 px; ｝ p { 高度:30 px; 背景颜色:蓝色; 保证金:5 px; ｝ p: last-of-type { margin-top:汽车; ｝ < div class = "容器" > < p > < / p > < p > < / p > < p > < / p > < / div >

同样，您也可以使用margin-left: auto或margin-right: auto进行相同的水平对齐。

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

.container { 显示:flex; 宽度:100%; 边框:1px实心#000; ｝ p { 高度:50 px; 宽度:50 px; 背景颜色:蓝色; 保证金:5 px; ｝ p: last-of-type { margin-left:汽车; ｝ < div class = "容器" > < p > < / p > < p > < / p > < p > < / p > < p > < / p > < / div >

2015-11-25 19:15:01

这种flexbox原理在水平方向上也适用

在计算柔性底座和柔性长度时，自动裕度被视为0。在对齐之前通过justify-content和 Align-self，任何正的自由空间都被分配到自动边距中这个维度。

为最后一项设置自动左距就可以了。

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

代码示例:

.container { 显示:flex; 宽度:400 px; 轮廓:1px纯黑色; ｝ p { 高度:50 px; 宽度:50 px; 保证金:5 px; 背景颜色:蓝色; ｝ .last-item { margin-left:汽车; ｝ < div class = "容器" > < p > < / p > < p > < / p > < p > < / p > < p class = "最后一项" > < / p > < / div >

Codepen片段

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

就像Envato在这里设计的公司标志一样。