这个问题涉及一个完全支持css3的浏览器，包括flexbox。
我有一个弹性容器，里面有一些物品。它们都为flex-start，但我希望最后一个。end项为flex-end。有没有一种好方法可以在不修改HTML和不诉诸于绝对定位的情况下做到这一点?
.container { 显示:flex; flex-direction:列; 轮廓:1px纯绿色; 最小高度:400 px; 宽度:100 px; justify-content: flex-start; } p { 高度:50 px; 背景颜色:蓝色; 保证金:5 px; } < div class = "容器" > < p > < / p > < p > < / p > < p > < / p > < p class = "结束" > < / p > < / div >
柔性盒子布局模块- 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 >
这种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在这里设计的公司标志一样。
Codepen片段
