O Flexbox é um modelo de layout que permite organizar os elementos espacialmente dentro da sua interface. Nesse artigo vamos descrever suas principais propriedades, para mais informação recomendamos esse guia.
Antes de entrarmos nas propriedades precisamos definir um elemento como flex, isso significa que todos os elementos dentro dele (que vamos chamar de contêiner ) irão seguir as propriedades do contêiner. Abaixo mostramos como definir um elemento como flex.
.container {display:flex; }
flex-direction
Essa propriedade irá definir a direção em que os itens serão posicionados. Os valores da propriedades podem ser:
Os itens serão posicionados da esquerda para a direita (opção padrão).
Os itens serão posicionados da direita para a esquerda.
Os itens serão posicionados de cima para baixo.
Os itens serão posicionados de baixo para cima.
justify-content
Essa propriedade irá definir o alinhamento dos itens. Os valores da propriedades podem ser:
Os itens serão alinhados no começo da linha (opção padrão).
Os itens serão alinhados no fim da linha.
Os itens serão alinhados centrados na linha.
Os itens serão alinhados de modo que fiquem divididos igualmente na linha.
Os itens serão alinhados de modo que fiquem divididos na linha com espaços iguais entre eles.
Os itens serão alinhados de modo que fiquem divididos de modo que dois itens sempre tenham o mesmo espaço entre eles.
flex-wrap
Por padrão todos elementos alinhados em uma linha, é possível modificar issocom a propriedade flex-wrap. Os valores da propridade podem ser:
Todos os itens serão alinhados em uma linha (opção padrão).
Os itens irão para a próxima linha conforme necessário.
Os itens irão para a próxima linha conforme necessário, porém do fim para o início.
align-content
Organiza a distribuição dos itens no eixo y.
Distribui os itens de modo que ocupem todo o espaço disponível do eixo y. (opção padrão).
Os itens são distribuídos igualmente e o espaço entre eles são iguais no eixo y.
Os itens são distribuídos igualmente no eixo y.
Os itens são posicionados no centro do eixo y.
Os itens são posicionados a partir do começo no eixo y.
Os itens são posicionados a partir do fim no eixo y.
Abaixo temos um exemplo completo de como essas propriedades podem ser usadas. Na primeira aba temos o código em HTML, na segunda o CSS e por último a página resultante.
