Блог

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

Я использую компоненты React и Material-UI List и ListItem для создания этого столбца навигации. Они отображаются как a <ul> с <li> тегами внутри.

Я пытался использовать position: fixed, bottom: 0 для последнего <li> тега, который правильно позиционирует его внизу, но при изменении размера окна он перекрывает другие элементы списка.

Я также попытался установить <ul> для отображения: flex, flex-direction: столбец, а затем установить для последнего <li> поля-top некоторое значение … но я действительно не хочу устанавливать для этого значение, потому что оно должно быть отзывчивым.

Это настолько близко, насколько я это сделал — CodeSandbox. Какой CSS я могу использовать, чтобы сделать последний элемент списка внизу и переместить его вверх при изменении размера экрана / окна?

Вы почти на месте flex . Используйте margin-top:auto на последнем <li> :

 html {height:100%}
body {
  width: 50%;
  height: 100%;
}

ul {
  height:100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
}

li {
  border: solid;
  padding: 0.5rem;
}

li:last-of-type {margin-top:auto}  

 <ul>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li class="right">THIS ONE FLEX END</li>
</ul>