1
resposta

flex-shrink

Boa Noite! o flex-shrink não funciona .flexContainer:last-child { margin-top: 2em; }

body { margin: 0; padding: 0; }

div { height: 50px; width: 50px; }

div:nth-child(1) { background-color: red; width: 50px; height: 50px; }

div:nth-child(2) { background-color: blue; }

div:nth-child(3) { background-color: green; }

div:nth-child(4) { background-color: yellow; }

div:nth-child(5) { background-color: pink; }

div:nth-child(6) { background-color: black; }

div:nth-child(7) { background-color: orange; }

div:nth-child(8) { background-color: silver; }

.flexContainer { display: flex; }

.flexItem { /* flex-grow: 1;*/ flex-shrink: 1; }

.primeiro { /* flex-grow: 1;*/ flex-shrink: 1; }

1 resposta

ola, o valor 1 colocado nas classes .flexitem e .primeiro já é o default das propriedades flex-grow e flex-shrink

tenta colocar valores maiores no item que você deseja que "encolha" mais quando a tela ficar menor.

por exemplo:

.primeiro{flex-shrink:2;}

já vai fazer com que o primeiro item encolha 2x mais que os demais itens que estão com o valor default de 1.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software