Esta propriedade atribui uma ordem numérica a cada item flexível. Por padrão, todos os itens têm order 0 e aparecem de acordo com sua posição no HTML.
Permite que o alinhamento padrão (ou o que estiver definido por align-items) seja sobrescrito para ítens individuais.
Define a habilidade de um flex item de crescer, caso necessário. O valor dessa propriedade é um valor numérico sem indicação de unidade, que serve para cálculo de proporção. Este valor dita a quantidade de espaço disponível no container que será ocupado pelo item.
Flex Grow: Define a habilidade de um flex item de crescer, caso necessário. O valor dessa propriedade é um valor numérico sem indicação de unidade, que serve para cálculo de proporção. Este valor dita a quantidade de espaço disponível no container que será ocupado pelo item.
Flex Shrink: Define a capacidade de um item flexível de encolher quando o espaço no contêiner for insuficiente. Assim como o flex-grow, seu valor é numérico e proporcional. Quanto maior o valor, mais o item irá encolher em relação aos demais. Se o valor for 0, o item não encolherá e tentará manter seu tamanho original, mesmo que isso faça com que ele ultrapasse os limites do contêiner.
Eles não crescem tantas vezes maios que o outro, tudo se trata de proporção, eles se esticam e encolhem proporcionalmente aos outros itens.
Os valores de flex-grow e flex-shrink funcionam com base na proporção entre os itens, e não como multiplicadores diretos de tamanho. Ou seja, quando o espaço do contêiner muda (aumenta ou diminui), os itens distribuem esse espaço de forma proporcional aos valores definidos.
Item A= flex-grow: 0 | flex-shrink: 1
O Item A não cresce quando a largura do contêiner aumenta — ele mantém seu tamanho definido em flex-basis. Porém, quando a tela é reduzida, ele pode encolher proporcionalmente, pois flex-shrink está ativado com valor 1.
Item B= flex-grow: 2 | flex-shrink: 0
O Item B cresce o dobro do Item C ao expandir a tela, pois seu flex-grow é 2 (enquanto o do Item C é 1). Isso significa que ele ocupa uma porção maior do espaço extra disponível. Por outro lado, ele não encolhe quando a tela diminui, pois seu flex-shrink é 0. Ou seja, ele tenta manter seu tamanho base ao máximo.
Item C= flex-grow: 1 | flex-shrink: 2
O Item C também cresce quando há espaço extra, mas em uma proporção menor que o Item B (porque seu flex-grow é 1). Ao diminuir a tela, o Item C encolhe mais rapidamente que o Item A, pois seu flex-shrink é 2 (o dobro do valor de A).