Eu te aconselho a simplesmente colocar um margin-left
e translateX()
no filho1
Assim ele fica alinhado no meio da página!
Veja como fica nesse exemplo
.pai{
display: flex;
justify-content: space-between;
}
.filho1 {
width: 100px;
height: 100px;
background-color: #f00;
margin-left: 50%;
transform: translateX(-50%);
}
.filho2 {
width: 100px;
height: 100px;
background-color: #0f0;
}
<div class="pai">
<div class="filho1"></div>
<div class="filho2"></div>
</div>
Para alinha o filho1
no espaço que sobra no pai descontando a largura do filho2
é só da um margin: auto
(assim ele alinha no espaço vazio que o filho2
deixar dentro do pai
)
.pai{
display: flex;
justify-content: space-between;
}
.filho1 {
width: 100px;
height: 100px;
background-color: #f00;
margin: 0 auto;
}
.filho2 {
width: 100px;
height: 100px;
background-color: #0f0;
}
<div class="pai">
<div class="filho1"></div>
<div class="filho2"></div>
</div>
EDIT
Cara eu fiquei meio intrigado pq a princípio eu queria usar a propriedade justify-self
, mas ela não funcionou! Ai fui pesquisar e achei essa excelente resposta que pode te abrir a cabeça para algumas coisas do FlexBox
https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties

Aparentemente justify-self
não se aplica nessa ocasião e o alinhamento no Main-axis (eixo X) deve ser feito utilizando margins
mesmo!
Veja alguns exemplos do alinhamento com as margens em um .container
com display:flex

OBS: Se vc inverter o eixo mudando o flex-direction
default de row
para column
ai vc pode usar o align-self
para alinhar como quiser, porém é como se cada item ficasse em uma row
(linha) diferente.
Porém se vc desejar vc pode corrigir isso colocando position: absolute;
nos filhos. Nesse exemplo eu não fiz isso pois é apenas para fins didáticos do exemplo.
Veja o exemplo:
.pai{
display: flex;
flex-direction: column;
}
.filho1 {
width: 100px;
height: 100px;
background-color: #f00;
align-self: center;
/* position: absolute; se quiser deixa-los na mesma linha de forma mais fácil */
}
.filho2 {
width: 100px;
height: 100px;
background-color: #0f0;
align-self: flex-end;
/* position: absolute; se quiser deixa-los na mesma linha de forma mais fácil */
}
<div class="pai"> pai com: display:flex e flex-direction:column
<div class="filho1">align-self: center;</div>
<div class="filho2"> align-self: flex-end;</div>
</div>