Criar elementos de redimensionamento automático com o Scalable.js
Se você precisar crie elementos flexíveis que preencham automaticamente seus contêineres Eu recomendaria altamente escalável. Este script JS de código aberto é perfeito para criar um design fluido sem muito estresse.
Tudo na biblioteca Scalable.js é maleável para que você possa alterar o estilo, tamanho, posição e conteúdo interno de todos os contêineres. Precisa de elementos alinhados na parte superior ou inferior da página? Escalável tem opções para isso.
Dê uma olhada no repositório do GitHub para saber mais sobre como isso funciona.
Na sua forma mais básica, esse script usa um elemento de página de destino junto com algumas opções para personalizar a exibição. Veja um exemplo de código retirado diretamente do GitHub:
var escalável = novo Escalonável (containerEl, opções);
Naturalmente, o primeiro parâmetro é o elemento recipiente que você está almejando (idealmente O parâmetro options deve receber uma matriz de pares key => value. Essas opções incluem valores de altura do recipiente, larguras mínimas e máximas, juntamente com as escalas mínima e máxima (isto é, quanto pode escalar com os elementos internos). Dê uma olhada na página principal do projeto para uma demonstração utilizável. Você pode arrastar os cantos do contêiner para redimensionar automaticamente o item flexível dentro dele. Isso é muito legal, pois abaixo dessa área você encontrará código utilizável tirado diretamente da página. Existem maneiras de lidar com elementos flexíveis com apenas CSS puro. No entanto, esses métodos podem parecer antigos e não oferecem tanto controle quanto o JavaScript. Se você quiser experimentar, basta pegar uma cópia do GitHub e ver o que acha. O Scalable ainda está em desenvolvimento ativo, mas é um script fácil de editar para suas necessidades.
