CSS Flex encolher

Uma folha de estilo em cascata é uma folha de código usada para adicionar efeitos e propriedades ao conteúdo HTML. Todos os conteúdos HTML são declarados dentro do corpo do código. Uma página da web é criada com tags HTML e projetada através de tags CSS. Uma folha CSS fornece propriedades para o conteúdo para parecer mais atraente na página da web.

Entre várias propriedades, existe uma propriedade Flex CSS que é aplicada ao Flexbox. Um Flexbox é um recipiente que contém mais caixas ou blocos conhecidos como flex. Uma propriedade Flex lida com flexibilidade. É a propriedade usada para aplicar comprimentos flexíveis em itens flexíveis. Essa flexibilidade está relacionada à expansão e encolhimento do flex. Neste artigo, veremos a propriedade Flex Shrink para ver até que ponto um flex pode ser encolhido em comparação com os outros itens nos contêineres.

A implementação da propriedade Flex Shrink envolve códigos HTML e CSS. As ferramentas básicas que são essenciais para a implementação dos códigos são: um editor de texto no qual escrevemos as tags HTML e CSS e um navegador usado para executar o arquivo de texto e uma página da web é mostrada. Primeiro, entenderemos a criação flexível usando HTML e CSS. Duas abordagens básicas do CSS são usadas aqui: Inline ou escrito dentro das tags HTML e o CSS interno declarado dentro da parte da cabeça da tag de estilo CSS. Eles podem ser acessados ​​criando IDs e classes mencionadas no momento da criação de conteúdo. Da mesma forma, a sintaxe que é dada abaixo está escrita dentro da etiqueta de estilo da seção da cabeça no código HTML.

Sintaxe da propriedade Flex Shrink:

Flex-shrink: valor (número);

O 'número' é o valor adicionado à propriedade para determinar como o item diminuirá em comparação com outros itens. 1 é o valor padrão desta propriedade. Isso significa que, usando 1, o encolhimento do flexão será zero.

Criação flexível:

As tags HTML são responsáveis ​​pelo desenvolvimento do conteúdo da página da web. No corpo, criaremos um Flexbox que será projetado através do CSS. Primeiro, mudamos a cor padrão em segundo plano para um efeito opcional. Um cabeçalho simples é declarado. Uma div é criada para conter o conteúdo dentro dele. Dentro da div, há uma divisão mais distante que a torna uma div aninhada. Tudo isso dentro declarado div são estilizados através de um estilo em linha, com a propriedade de cor de fundo para adicionar cores ao flexível. Além disso, também usamos alfabetos simples como texto para nomear cada bloco flexível. A divisão externa é acompanhada pela classe CSS. Esta classe é declarada no CSS e terá algumas propriedades a serem aplicadas à div, tornando -a uma caixa flexível.

Código corporal HTML:

Toda a div dentro da divisão externa criará recipientes separados conhecidos como flex. Cada um terá uma cor diferente. Todo esse código funcionará usando CSS, como até agora no HTML, não fornecemos nenhum alinhamento ou dimensões ao Flexbox ou aos blocos internos também. Vamos considerar a folha de estilo primeiro.

Dentro da tag de estilo, agora explicaremos todos os IDs declarados dentro das tags do conteúdo HTML. Como a tag 'conteúdo' é declarada na divisão externa. A largura é dada com um valor de exibição que é flexível. Isso formará um bloco conhecido como o Flexbox. Agora, vamos estilizar os blocos internos. O nome de identificação seguirá a div interior. A div interior conterá uma propriedade base. Esta base flexível é a distância ou a área de uma única flexão dentro da caixa. Uma borda é aplicada a cada caixa com uma cor dada no código.

#Content div
Flex-Basis: 240px;
Fronteira: 3px RGBA sólido (0,0,0,.1);

Cada flex terá uma área de 240 pixels. Depois dessas tags de estilo, feche todas as tags, incluindo a etiqueta da cabeça.

Código HTML CSS:

Salve o código no arquivo do editor de texto com extensão HTML e depois execute o arquivo no navegador. Você verá que uma página da Web estática é formada com pequenas flexões formadas com cores e alfabetos diferentes.

Saída:

Isso é feito principalmente usando as dimensões de largura para os blocos externos e internos da div para ser ajustado. Dessa forma, um simples flex é criado.

Agora, veremos como um único bloco da flexão diminuirá.

Flexão flexível:

A parte do corpo HTML para o flexão flexível será a mesma, pois o número de blocos div na caixa de flexão é o mesmo com o mesmo efeito de cor e o texto que é adicionado a ele. Considerando que a propriedade do estilo CSS terá uma proporção diferente para cada área flexível. No corpo HTML, cada div interior que causa uma flexão é atribuído a uma classe. Cada nome de classe tem seu efeito de propriedade que é aplicado à div interior.

Na parte da cabeça, dentro da etiqueta de estilo, cada classe terá uma descrição dos efeitos aplicados para causar o encolhimento flexível.

Código corporal HTML:

Os detalhes presentes sob o conteúdo e o conteúdo da DIV serão os mesmos que explicamos acima na criação flexível. O Flexbox terá uma largura apropriada e a área flexível também é dada em pixels que aplicam uma borda a ela com a mesma cor do flexível.

Código HTML CSS:

Algumas informações extras que são adicionadas para causar o flexão flexível é a explicação da classe. Cada classe contém um valor flexível flexível. O primeiro bloco ou flex tem um valor, o segundo tem 2, e o 3º e o 4º Flex têm esses valores correspondentemente.

.Box0
Flex-Shrink: 1;

A primeira caixa tem um tamanho aproximadamente mais próximo do tamanho original do flex. Usamos '1' ao valor que causa o tamanho do flex. Você notará que o tamanho diminuirá do 1º para o 4º Flex. O último 4º é o menor do terceiro.

Salve o código com a mudança. Em seguida, execute para ver as mudanças no navegador da web. Você verá que, à medida que o flexiona do lado esquerdo para a direita, o flexion.

Saída:

Conclusão

O artigo do CSS Flex Shrink é escrito para descrever a propriedade CSS Shrink que é aplicada ao flexível. Esta propriedade é usada para encolher a flexão dentro da caixa flexível, aumentando o valor da propriedade Flex em números. Por padrão, 1 é o número que é usado para manter a flexão sem qualquer alteração. À medida que o número aumenta, o encolhimento da flexão também aumenta. Primeiro, no artigo, demos uma visão geral das dependências HTML e CSS. Depois disso, explicamos a criação de uma simples caixa flexível com quatro flexões dentro dela. Naquela época, não aplicamos nenhuma propriedade flexível. Mas então, no mesmo código, adicionamos um estilo interno para adicionar a propriedade Flex-Shrink a cada flexão do bloco.