Sim é possível conseguir o que quer, mas vc vai precisar de um truque para algumas situações...
Primeiro para alinhar tudo a esquerda vc precisa usar justify-content: flex-end;
dessa forma se seu grid estiver "completo" tudo vai ficar perfeito. Abaixo vou explicar o que eu quero dizer com "completo".
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
/* alinha o último item a esquerda */
justify-content: flex-end;
}
.box {
border: 1px solid #000;
height: 100px;
width:calc(100% / 3);
box-sizing: border-box;
}
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
Mas e se forem só 5 elementos e não 6. Pois com 5 ele não fica "completo" e a linha de cima vai ficar com um "buraco" devido a falta de um elemento para preencher completamente o grid... Para esse caso vc precisa criar um "espaçador", um elemento vazio que vc vai usar para preencher esse "buraco" e deixar tudo alinhado. No caso eu criei uma classe chamada .vazio
que eu uso nesse elemento. Tb coloquei aria-hidden="true"
no elemento para ele não se visível para os leitores de tela.
Veja o resultado, deixei comentado no código. (se forem só 4 vídeos vc vai precisar de 2 elementod vazios no final)
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
justify-content: flex-end;
}
.box {
border: 1px solid #000;
height: 100px;
width:calc(100% / 3);
box-sizing: border-box;
}
/* classe do elemento vazio */
.box.vazio {
border: 1px solid transparent;
}
<div class="container">
<!-- elemento vazio para ajustar o grid -->
<div class="box vazio" aria-hidden="true"></div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>