Te traemos el arreglo a este enigma, o por lo menos eso pensamos. Si continuas con interrogantes puedes dejarlo en el apartado de preguntas, que para nosotros será un gusto ayudarte
Solución:
no parece haber justify-selfpero puede lograr un resultado similar configurando apropiadamente margin para auto¹. P.ej. por flex-direction: row (predeterminado) debe configurar margin-right: auto para alinear al niño a la izquierda.
.container
height: 100px;
border: solid 10px skyblue;
display: flex;
justify-content: flex-end;
.block
width: 50px;
background: tomato;
.justify-start
margin-right: auto;
¹ Este comportamiento está definido por la especificación Flexbox.
AFAIK, no hay una propiedad para eso en las especificaciones, pero aquí hay un truco que he estado usando: configure el elemento contenedor (el que tiene display:flex ) para justify-content:space-around
Luego agregue un elemento adicional entre el primer y el segundo elemento y configúrelo en flex-grow:10 (o algún otro valor que funcione con su configuración)
Editar: si los elementos están bien alineados, es una buena idea agregar flex-shrink: 10; también al elemento adicional, por lo que el diseño responderá 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 espacios intermedios.
.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;
1
2
3
4
5
O si estuviera haciendo lo mismo con flex-start y flex-end invertidos, simplemente cambie el orden del contenedor predeterminado-flex y el hijo solitario.
Si posees algún cuestión o capacidad de reformar nuestro división eres capaz de realizar un informe y con deseo lo analizaremos.