最后移动 <li> 元素到容器的底部，其余的居中

Question

我试图让我的菜单居中，使用flexbox居中在栏的中间，而最后一个元素被推到容器的底部。

这是我的JSfiddle 。

我尝试过使用align-self flex-end而没有成功

li:last-child {
    margin-top: auto;
}  

这将我的最后一个元素与底部对齐，但将其余项目推送到容器的另一端。

Answer 1

您可以在列表的开头添加另一个空<li>并为其提供flex-grow:1属性，然后将其设置为最后一个li 。 这是一个例子

它可能在没有额外元素的情况下工作，只需将第一个li设置为flex-grow:1 。 第二个例子

请注意，您必须将第一个元素内的文本与底部对齐。

Answer 2

你可以关注这个CSS。 我这样做了。

 ul { height: 400px; margin: 0; padding: 0; background-color: #f00; position: relative; } li { list-style: none; color: #fff; } li:last-child { position: absolute; bottom: 0; left: 0; right: 0; } 

 <ul> <li>items</li> <li>items</li> <li>items</li> <li>items</li> <li>items</li> <li>items</li> <li>items</li> </ul>