Question

我正在尝试使用弹性框居中于菜单中间，同时将最后一个元素推到容器底部，以使菜单居中。

这是我的JSfiddle。

我尝试过align-self flex-end并没有成功，并且

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

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

Answer 1

您可以在列表的开头添加另一个空的<li>，并将其赋予flex-grow:1属性，然后将其设置为最后一个li。 Here's an example

它可能不需要附加元素，只需将第一个li设置为flex-grow:1。 Second example here

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

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>

将最后一个<li>元素移到容器底部，其余元素居中

2 个答案: