2

Conheci agora essa propriedade e preciso criar uma rede-social com possibilidade da inclusão de videos... no caso gostaria de que o último adicionado ficasse no topo à esquerda e assim por diante...

esse é meu código

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

}

porém o último adicionado fica alinhado à direita... se eu colocar apenas "wrap" a sequência muda, levando os videos de baixo para cima e de cima para baixo, alinhando à direita... O que fazer?

1 Resposta 1

0

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>

5
  • Oi hugo, muito obrigado pela demonstração, mas, como eu faria para "automatizar" esse processo? Pois, o usuário iria colocando os videos/fotos e etc e poderiam ser apenas 4 ou 5 ou 6 e tal... como eu faço pra esse box vazio ser utilizado quando fosse preciso, de uma maneira automática? (ficarão no máximo 3 videos por linha, se um quarto for adicionado, ele será colocado embaixo.) Desde já agradeço a disposição!!! Commented 6/03/2019 às 19:23
  • @FilipeOliveira a forma mais fácil pra resolver isso eh sempre deixar 2 box vazios ai mesmo tendo só 1 ou 4 ou 5 sempre vai alinhar. Se não for assim vc vai ter que fazer um js pra contar quantos itens tem no container e adicionar 1 ou 2 box vazios. Por isso falei para já deixar 2 de uma vez rss. Eu não entendo de js então não sei resolver dessa forma, mas vc pode marcar essa resposta e abrir outra pedindo ajuda com o js para fazer isso, tem um povo fera aqui de js que pode te ajudar
    – hugocsl
    Commented 6/03/2019 às 20:45
  • poxa, fiz aqui e não faltou... o box 1 foi pra cima sozinho... enquanto os outros agruparam-se embaixo :/ Commented 10/03/2019 às 15:48
  • Agora esta ruim pra testar aqui, mas depois vou testar direito e te falo
    – hugocsl
    Commented 10/03/2019 às 17:43
  • @FilipeOliveira é cara infelizmente testei aqui e não tem como deixar "automático", se a última fileira tiver só um item vc tem que por 2 box vazios, e se tiver 2 vc tem que por 1 box vazio, não da para deixar os 2 vazios de uma vez.... Vc pode pensar em um JS para contar quantos box tem e colocar 1 ou 2 vazios, mas de JS não entendo nada não consigo te ajudar nessa
    – hugocsl
    Commented 10/03/2019 às 21:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .