Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

flexbox - dúvida: propriedade order da atividade 11 (dando mais destaque para o primeiro trabalho na home)

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Flexbox e atividade Dando mais destaque para o primeiro trabalho na home

por Estudante
| 273.6k xp | 265 posts

Olá pessoal !

Na resposta deste exercício, para o primeiro item da lista de trabalhos (no html) aparecer entre os outros dois trabalhos, além de aplicar a propriedade order (valor 2) no primeiro item, é necessário aplicar a ordem também nos outros dois itens, conforme abaixo:

.trabalhos li:first-child {
    order: 2;
    transform: scale(1.2);
}
.trabalhos li:nth-child(2) {
    order: 1;
}
.trabalhos li:last-child {
    order: 3;
}

Dúvida: porque é necessário definir uma ordem para todos os itens da lista de trabalhos? Pergunto porque, seguindo a lógica da resposta, se tivesse mais itens, eles também teria que ter um propriedade order? Se sim, não teria alguma alternativa mais prática/flexível, onde apenas o item em questão precisasse ser ordenado, e os demais itens seria ordenados conforme ordem no html?

Aguardo vossos comentários, desde já obrigado!

Atte.,

Elías.

3 respostas
por Wanderson Macêdo
| 3967.1k xp | 8086 posts
Instrutor

Oi Elías, você não precisa definir a ordem de todos os elementos. O order tem o valor padrão de 0, então, para todos que você não definir um valor, será considerado o valor padrão e eles aparecerão na mesma ordem que estão no HTML.

Neste caso, você vai precisar definir valores por que está usando números maiores que 1, fazendo com que todos os demais sejam mostrados antes dele.

Considerando isso, você pode mudar a ordem no HTML em si ou usar números negativos.

por Estudante
| 273.6k xp | 265 posts

Olá Wanderson,

Ok, entendi que é necessário definir uma ordem para todos os itens da lista de trabalhos, quando um deles tem um order maior que 0 (zero).

Me corrija se incorreto, mas é uma pena que seja assim porque, pensando em uma mudança, se fosse adicionado mais um trabalho (elemento), o programador obrigatoriamente terá que aplicar um order neste novo elemento, do contrário será exibido antes dos demais elementos (por ter o order com valor padrão igual a 0).

Então não tem escapatória hehehe, para o caso acima tem que aplicar um order para todos os elementos , para a ordem ficar correta.

Obrigado pelo retorno.

Atte.,

Elías.

solução!
por Wanderson Macêdo
| 3967.1k xp | 8086 posts
Instrutor

Opa Elías, bom, você está certo, mas como disse, se houver a necessidade de definir que um elemento da lista tenha uma precedência sobre os demais, o mais interessante e menos trabalhoso é que você use números negativos pra isso.

Entende que não é um problema de CSS? É um problema de lógica em como a gente usa o recurso.

Exemplo: posso definir um valor diferente de 0 para todos os elementos. (2) e para os que quero que sejam agrupados com precedência, posso definir outro valor (1). Veja, que posso agrupar X elementos com certo número e eles seguirão a ordem natural dentro da sequência.

Isso é muito mais do que conseguiríamos fazer anos atrás, onde a única forma de ordenar, seria alterando o HTML da página ou mesmo criando uns javascripts bizarros.

O order é poderoso, assim como muita coisa que temos no CSS3. O problema está em como entendemos esse poder.