Itens flex são filhos do contêiner flex. Eles não são mais elementos de nível inline ou bloco. Assim, é possível alterar as propriedades dos itens para obter o posicionamento correto.

flex-basis

A propriedade flex-basis define o tamanho inicial de um item flex antes que qualquer espaço restante seja distribuído. Ela especifica o tamanho ideal de um item flex, que pode ser ajustado dependendo do espaço disponível e de outras propriedades do contêiner flex.

flex-basis: auto | value;

É possível definir o tamanho usando pixels, porcentagens ou ems para especificar o tamanho ideal, ou definir como auto, permitindo que o navegador determine o tamanho com base no conteúdo do item.

flex-grow

A propriedade flex-grow determina a capacidade de um item flexível crescer em relação aos outros itens dentro de um contêiner flex quando há espaço extra disponível.

A propriedade flex-grow aceita um valor sem unidade que indica o tamanho relativo do item flexível em comparação com os outros itens. Por exemplo, se um item possui o valor flex-grow igual a 2 e outro possui o valor 1, o primeiro item crescerá o dobro do segundo quando houver espaço extra no contêiner flex.

order

A propriedade order é utilizada para definir a ordem de exibição dos itens flexíveis dentro de seu contêiner. Por padrão, os itens flexíveis são exibidos na ordem em que aparecem no documento HTML. No entanto, é possível modificar essa ordem utilizando a propriedade order.

O valor de order pode ser qualquer número. Mesmo que existam apenas 3 elementos, atribuir order: 1000; ao segundo elemento não significa que haverá 1000 elementos. Isso apenas indica que o segundo elemento será posicionado na última posição. Além disso, se alguns elementos tiverem o mesmo valor de order, o navegador irá posicioná-los conforme a ordem em que aparecem no documento HTML. Vamos reorganizar a propriedade order dos itens na lista a seguir. O objetivo é colocar o terceiro item na primeira posição.