Cómo justificar un único elemento flexbox (override justify-content)

AFAIK no hay ninguna propiedad para eso en las especificaciones, pero aquí hay un truco que he estado usando: establezca el elemento contenedor ( el que tiene display:flex ) en justify-content:space-around Luego agregue un elemento adicional entre el primer y el segundo elemento y establézcalo en flex-grow:10 (o algún otro valor que funcione con su configuración)

Editar: si los elementos están estrechamente alineados, es una buena idea agregar flex-shrink: 10; al elemento adicional también, para que el diseño responda correctamente en dispositivos más pequeños.

Si en realidad no está restringido a mantener todos estos elementos como nodos hermanos, puede envolver los que van juntos en otro cuadro flexible predeterminado, y hacer que el contenedor de ambos use espacio entre.

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

O si estuviera haciendo lo mismo con flex-start y flex-end invertida, simplemente cambie el orden del contenedor default-flex y lone child.

Parece que justify-self llegará pronto a los navegadores. Ya hay un artículo sobre ello en MDN . En el momento de escribir este artículo, el soporte del navegador es pobre.

Con respecto a margin-solution: Tengo una cuadrícula Flexbox con huecos. No hay ninguna propiedad flex-gap (¿todavía?) con Flexbox. Así que para las canaletas, estoy usando rellenos y márgenes, por lo que margin: auto necesita sobrescribir los otros márgenes...

Para aquellas situaciones en las que se conoce el ancho de los elementos que desea flex-end, puede establecer su flex en "0 0 # # px" y establecer el elemento que desea flex-start con flex:1

Esto hará que el elemento pseudo flex-start llene el contenedor, simplemente formatéelo en text-align:left o lo que sea.

Resolví un caso similar estableciendo el estilo del elemento interno a margin: 0 auto.
Situación: Mi menú generalmente contiene tres botones, en cuyo caso deben ser justify-content: space-between. Pero cuando solo hay un botón, ahora estará alineado al centro en lugar de a la izquierda.