Desenvolvimento Web com HTML, CSS e JavaScript > Display Flex

Display Flex

Vimos algumas maneiras de manipular posicionamento de elementos como display: inline/block/inline-block, margin: e text-align, mas todas essas maneiras são muito "rígidas" na hora de distribuir elementos na página. Nós conseguimos posicionar com uma certa precisão os elementos na tela, mas esse posicionamento é muito fixo no sentido de que se o container ou a tela mudar de tamanho, os elementos não vão ter seu posicionamento adaptado. Tudo precisa ser sempre milimetricamente calculado para que o restante dos elementos dispostos na tela não sejam afetados pelas mudanças de dimensões.

Pensando nessa flexibilidade de posicionamento, as pessoas desenvolvedoras criaram um novo tipo de display: o display: flex;.

Flex Container

O display: flex funciona de uma maneira diferente dos outros displays. Quando colocamos essa propriedade em um elemento, esse elemento se torna um flex container, a partir daí podemos manipular todos os elementos filhos desse flex container com propriedades novas. Essas propriedades devem ser usadas no elemento que é um flex container.

Por padrão, quando aplicamos display: flex para um elemento, todos os filhos ficam um do lado do outro como se estivessem sob o efeito de display: inline.

Propriedades de um Flex Container