Flex Basis | Flexbox: posicione elementos na tela

Fala aí, Nicolas! Beleza, cara? =)

O flex-basis é uma propriedade que utilizamos quando há a possibilidade de usar o flex-grow para "esticarmos" o elemento. Ele servirá, como o próprio nome diz, como uma base para eles. Se não alterar o valor padrão do flex-basis (auto), o valor usado como base será a largura e altura do próprio elemento. Caso passemos 0, ele terá uma base em branco, então não aparecerá nada. Aí, se passarmos um flex-grow, ele "esticará" o elemento.

Faça o seguinte teste:

<body>
  <div class="container">
    <div class="elemento"></div>
    <div class="elemento"></div>
    <div class="elemento"></div>
    <div class="elemento"></div>
    <div class="elemento"></div>
    <div class="elemento"></div>
    <div class="elemento"></div>
    <div class="elemento"></div>
    <div class="elemento"></div>
    <div class="elemento"></div>
  </div>
</body>

Simplesmente coloquei 10 elementos dentro de um "container" que terá o display: flex. Agora o seguinte CSS:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

elemento {
    height: 100px;
    width: 100px;
}

elemento:nth-child(odd) {
    background: black;
}

elemento:nth-child(even) {
    background: red;
}

elemento:nth-child(1) {
    flex-grow: 1;
}

O que acabei de fazer foi simplesmente configurar tudo para utilizar o flexbox.

Os background nos elementos ímpares e pares, foi simplesmente para conseguirmos visualizar as diferenças que ocorrerão...

Observe que não utilizei a propriedade flex-basis em momento algum, então ela terá o valor auto. Dessa forma, a base será iguais às largura e altura dos elementos. O flex-grow, permitirá ver o crescimento.

Entretanto, se colocarmos flex-basis: 0, estamos dizendo que ele não deve ter nada de base, então nada aparecerá na tela, apenas o elemento com o flex-grow, que estará ocupando todo o espaço, sacou? =)

Se você der uma "Googlada" com flex-basis, vai ver que há alguns bugs relacionados à essa propriedade. Ela já foi alterada duas vezes e parece que ainda não está 100%...

Faça uns testes para ter certeza que conseguiu entender... Caso tenha alguma dúvida, não deixe de postar por aqui para que possamos ajudá-lo, ok? =)

Espero ter ajudado! Abraço e bons estudos,

Fábio

PRORROGAMOS O DESCONTO!