Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Cálculo automático dos cards, descontando as propriedades de margin, padding etc definidas

Olá pessoal!

Neste exercício, o cálculo da largura dos cards (considerando 5 por linha e margem à dir de 1rem) foi feito da seguinte forma:

margin-right: 1rem; width: calc(20% - 1rem);

Existiria alguma forma de calcular a largura destes cards automaticamente (ou essa mágica ainda não existe?), ou seja, independente das propriedades que podem influenciar na largura (margin, padding, etc), o cálculo dos cards considerar o tamanho restante (descontados margin/padding etc sem serem informados manualmente como no calc acima) dividido pela quantidade de cards por linha (neste caso definiu-se 5)? "Exemplo":

width: calc(espaço restante / 5);

espaço restante = tamanho restante da linha, descontados possíveis margin/padding, etc.

Motivo: quando houver refatoração, ajuste de layout e for alterado, adicionado ou removido um padding, margin, toda vez o programador precisará se lembrar de ir no cálculo do width e modificar, remover, adicionar esta propriedade/valor relacionado.

Atenciosamente, Elías.

3 respostas

Fala aí Elías, tudo bem? Na verdade o margin-right quando utilizando junto com flexbox acaba sendo opcional.

Exemplo: Imagine uma linha com cinco caixas, queremos adicionar o espaçamento de 10px entre elas e o resto completar com o tamanho:

.linha {
    display: flex;
}

.caixa {
    width: calc(20% - 1rem);
}

Dessa maneira, agora só precisamos dar o espaço entre as caixas, podemos fazer com justify-content:

.linha {
    justify-content: space-between;
}

Sacou?

Mas, o calc precisa ser feito para que os elementos não ocupem 100% do espaço, pois, precisamos que ocupem 20% menos um pouco para ter o espaçamento.

Se quiser, dá uma olhada nesse exemplo:

https://jsfiddle.net/mahenrique94/xa9n5e7L/

Espero ter ajudado.

Olá Matheus!

Acho que entendi: com display: flex não tem como fugir do cálculo, mas e se fosse utilizado display: grid, e sua respectiva unidade de medida fr (que você me explicou neste tópico)?

Atenciosamente.

solução!

Exatamente, isso mesmo Elías (pelo menos até hoje não).

Abraços e bons estudos.