Esta pregunta se refiere a un navegador con compatibilidad completa con css3, incluido flexbox.

Tengo un contenedor flexible con algunos artículos. Todos están justificados para flex-start pero quiero que el último .end elemento esté justificado para flex-end. ¿Existe una buena forma de hacerlo sin modificar el HTML y sin recurrir al posicionamiento absoluto?

.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>

Módulo de diseño de caja flexible - 8.1. Alineación con márgenes automáticos

Los márgenes automáticos en elementos flexibles tienen un efecto muy similar a los márgenes automáticos en el flujo de bloques:

• Durante los cálculos de bases flexibles y longitudes flexibles, los márgenes automáticos se tratan como 0.

• Antes de la alineación mediante justify-contenty align-self, cualquier espacio libre positivo se distribuye a los márgenes automáticos en esa dimensión.

Por lo tanto, podría utilizar margin-top: autopara distribuir el espacio entre los otros elementos y el último elemento.

Esto colocará el último elemento en la parte inferior.

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>

Asimismo, también puede utilizar margin-left: autoo margin-right: autopara la misma alineación horizontalmente.

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>

Este principio de caja flexible también funciona horizontalmente

Durante los cálculos de las bases flexibles y las longitudes flexibles, los márgenes automáticos se tratan como 0.
Antes de la alineación a través de justificar contenido y alinearse a sí mismo, cualquier espacio libre positivo se distribuye a los márgenes automáticos en esa dimensión.

Establecer un margen izquierdo automático para el último elemento hará el trabajo.

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

Ejemplo de código:

.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>

Fragmento de Codepen

Esto puede resultar muy útil para los pies de página de escritorio.

Como hizo Envato aquí con el logo de la empresa.

Fragmento de Codepen