Переместите последний элемент <li>в нижнюю часть контейнера, оставив по центру

Question

Я пытаюсь центрировать свое меню, используя центрирование flexbox в середине панели, в то время как последний элемент перемещается в нижнюю часть контейнера.

Вот мой JSfiddle .

Я пробовал с align-self flex-end безуспешно и

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

Это выравнивает мой последний элемент по низу, но прижимает остальные элементы к другому концу контейнера.

Answer 1

Вы можете следить за этим 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>

Answer 2

Вы можете добавить еще одну пустую <li> в начало списка и дать ему свойство flex-grow:1, а затем установить его также на последний li. Вот пример

Это может работать без дополнительного элемента, просто установите для первого li значение flex-grow:1. Второй пример здесь

Обратите внимание, что вам придется держать текст внутри первого элемента выровненным по низу.