align-self не спускается вниз

Question

.nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.nav-item {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  list-style-type: none;
}

.nav-link {
  font-size: 1.1rem;
}

.setting {
  align-self: flex-end;
  color: red;
}

<div>
  <ul class="nav">
    <li class="nav-item">
      <div class="nav-link">
        1
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        2
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        3
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link setting">
        внизу прикреплен
      </div>
    </li>
  </ul>
</div>

flex смотрю тут я пытаюсь спустить 4 элемент списка вниз страницы, тут тоже пример был и еще другие пробовала примеры, которые тут на сайте при задавании вопроса всплыли, но почему то последний элемент идем следом за тремя впритык ?

вот еще несколько сайтов, которые мне встретились по ходу поиска :

the-echoplex.net

css-tricks.com

вот еще вот так попробовала, тоже не то

.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nav-item {
  list-style-type: none;
}

.nav-link {
  font-size: 1.1rem;
  color: green;
}

.foot {
  align-self: flex-end;
  color: red;
}

<div>
  <ul class="nav">
    <li class="nav-item">
      <div class="nav-link">
        1
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        2
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        3
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link foot">
        внизу прикреплен (!!!)
      </div>
    </li>
  </ul>
</div>

а надо вот как, но это уродливо с точки зрения написания кода

.nav {}

.nav-item {
  list-style-type: none;
}

.nav-link {
  font-size: 1.1rem;
}

.foot {
  margin-top: 200px;
}

<div>
  <ul class="nav">
    <li class="nav-item">
      <div class="nav-link">
        1
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        2
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        3
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link foot">
        внизу прикреплен
      </div>
    </li>
  </ul>
</div>

Answer 1

Ну, во-первых, у Вашего .nav нет высоты, поэтому последний пункт не может никуда опуститься (он и так в самом низу).

Во-вторых, положение надо задавать не блоку .foot, а последнему элементу li, поскольку именно на элементы списка распространяется действие флекса.

В-третьих, align-self: flex-end Вам не поможет - это просто перенесёт последний пункт вправо (поскольку у Вас flex-direction: column).

Необходимо использовать margin-top: auto

.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 200px;
  border: 1px solid red;
}

.nav-item {
  list-style-type: none;
}

.nav-link {
  font-size: 1.1rem;
  color: green;
}

.foot {
  color: red;
}
.nav-item:last-of-type {
  margin-top: auto;
}

<div>
  <ul class="nav">
    <li class="nav-item">
      <div class="nav-link">
        1
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        2
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        3
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link foot">
        внизу прикреплен (!!!)
      </div>
    </li>
  </ul>
</div>

БЛОГ НА HUSL

align-self не спускается вниз

Ответы (1 шт):