Це питання стосується браузера з повною підтримкою css3, включаючи flexbox.

У мене є гнучкий контейнер з деякими предметами. Всі вони виправдані, щоб почати з флекс-старту, але я хочу, щоб останній .end пункт був виправданий для флекс-кінця. Чи є хороший спосіб зробити це, не змінюючи HTML і не вдаючись до абсолютного позиціонування?

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

Модуль гнучкого розміщення коробки - 8.1. Вирівнювання за автоматичними полями

Автоматичні поля на елементах flex мають ефект, дуже схожий на автоматичні поля в потоці блоків:

• Під час розрахунків гнучких основ та гнучких довжин, автоматичні поля розглядаються як 0.

• До вирівнювання за допомогою justify-contentі align-self, будь-який позитивний вільний простір розподіляється на автоматичні поля в цьому вимірі.

Тому ви можете використовувати margin-top: autoрозподіл простору між іншими елементами та останнім елементом.

Це дозволить розташувати останній елемент внизу.

p:last-of-type {
  margin-top: auto;
}

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;
}
p {
  height: 30px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-top: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
</div>

Так само ви можете використовувати margin-left: autoабо margin-right: autoдля того ж вирівнювання по горизонталі.

p:last-of-type {
  margin-left: auto;
}

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}
p {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

Цей принцип Flexbox також працює горизонтально

Під час розрахунків гнучкої основи та гнучкої довжини автоматичні поля розглядаються як 0.
Перед вирівнюванням за допомогою вирівнювання-вмісту та вирівнювання-самостійно, будь-який позитивний вільний простір розподіляється до автоматичних полів у цьому вимірі.

Встановлення автоматичного лівого поля для останнього елемента зробить свою роботу.

.last-item {
  margin-left: auto;
}

Приклад коду:

.container {
  display: flex;
  width: 400px;
  outline: 1px solid black;
}

p {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: blue;
}

.last-item {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="last-item"></p>
</div>

Фрагмент Codepen

Це може бути дуже корисно для настільних колонтитулів.

Як це робив Envato з логотипом компанії.

Фрагмент Codepen