Seção extra baseada na documentação da W3C: https://www.w3schools.com/css/css3_flexbox_items.asp

Quando utilizamos display flex em um container, além de habilitarmos novos atributos para o container também habilitamos os seguintes atributos para os itens dentro deste container:

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

Order

Especifica a ordem dos itens flexíveis.

<div class="flex-container">
  <div style="**order: 3**">1</div>
  <div style="**order: 2**">2</div>
  <div style="**order: 4**">3</div>
  <div style="**order: 1**">4</div>
</div>

Flex-grow

Especifica o quanto um item irá crescer em relação aos outros.

O valor padrão é 0.

<!-- O último crescerá 8 vezes mais que os outros itens -->
<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

Flex-shrink

Específica o quanto um item irá encolher em relação aos outros.