How do I align Divs from left to right from top to bottom with flexbox?

Question

I just met this property and I need to create a social-network with the possibility of including videos... in case I would like the last one added to be at the top left and so on...

that’s my code

.videos{
border: #D42574 1px solid;
margin: 0px 7% auto;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap-reverse; 
justify-content: space-between;

}

but the last one added is aligned to the right... if I just put "wrap" the sequence changes, taking the videos from the bottom up and from the top down, aligning to the right... What to do?

Answer 1

Yes it is possible to get what you want, but you will need a trick for some situations...

First to align everything left you need to use justify-content: flex-end; this way if your grid is "complete" everything will be perfect. Below I will explain what I mean by "complete".

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>

---

But what if it is only 5 elements and not 6. Because with 5 it is not "complete" and the top line will have a "hole" due to the lack of an element to completely fill the grid... For this case you need to create a "spacer", an empty element that you will use to fill this "hole" and keep everything aligned. In case I created a class called .vazio that I use in this element. Tb aria-hidden="true" in the element for it is not visible to screen readers.

See the result, I left commented in the code. (if it is only 4 videos you will need 2 empty elementod at the end)

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>