Itens flexíveis 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

]flex-basis] define o tamanho inicial de um item flex antes que o espaço extra seja distribuído. Pode ser definido usando px, %, em ou auto (tamanho baseado no conteúdo).

flex-basis: auto | value;

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 igual a 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 dentro de seu contêiner. Por padrão, os itens flex 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 o order dos itens na lista a seguir. O objetivo é colocar o terceiro item na primeira posição.