Utilizando CSS Flexbox (Flexbox contêiner)

O flex é uma ferramenta do CSS que facilita a organização dos conteúdos de um contêiner. Para ativar o flex em determinado contêiner, basta utilizar na propriedade "display" o valor "flex". Veja o exemplo abaixo que ativa o flex em uma tag <section>.

section {
  display: flex;
}

Para melhor entendimento e exemplos práticos de aplicação, não deixe de acompanhar o vídeo dessa aula. Nas seções seguintes será apresentado um resumo das principais propriedades flex.

Flex-direction

O "flex-direction" indica a direção de como os conteúdos de um contêiner com display flex, irão se distribuir. Veja algumas opções:

Quadro 1 - Disponibilidade do display flex-direction

Valor	Descrição
row	Dispõe os elementos um ao lado do outro
row-reverse	Dispõe os elementos um ao lado do outro em ordem reversa (da direita para a esquerda)
column	Dispõe os elementos um abaixo do outro (começando de cima)
column-reverse	Dispõe os elementos um acima do outro (começando de baixo)

Flex-wrap

Essa propriedade controla como se dará a quebra, quando não há espaço suficiente para mostrar todos os itens em uma mesma linha (ou coluna, para o caso da "flex-direction" ser "column"). Confira no quadro abaixo os principais valores para essa propriedade.

Quadro 2 - Disponibilidade do display flex-wrap

Valor	Descrição
wrap	Quebra a linha posicionando os itens na linha seguinte (ou coluna)
wrap-reverse	Quebra a linha, posicionamento os itens na linha seguinte em ordem reversa
no-wrap	Não quebra a linha

Flex-flow

O "flex-flow" é uma propriedade que sumariza em uma única propriedade o comportamento da "flex-direction" a da "flew-wrap". Veja o exemplo abaixo que configura a "flex-direction" para "row" com "flex-wrap" configurado para "wrap":

section {
 display: flex;
 flex-flow: row wrap;
}

Flex-justify

O "flex-justify" é a propriedade responsável por controlar como os elementos serão distribuídos dentro do contêiner. Veja algumas opções no quadro a seguir:

Quadro 3 - Disponibilidade do "ﬂex-justify"

Valor	Descrição
flex-start	Distribui os itens do início para o fim: da esquerda para a direita, em caso de linha, e, de cima para baixo, em caso de coluna.
flex-end	Distribui os itens do fim para o início: da direita para a esquerda, em caso de linha e, de baixo para cima, em caso de coluna.
center	Distribui os itens a partir do centro
space-between	Os itens terão espaço entre eles
space-arround	Os itens terão espaço antes, depois e entre eles
space-evenly	Os itens terão espaço igual ao seu redor

Align-itens

A propriedade "align-itens" controla o comportamento do alinhamento dos itens, com relação ao eixo vertical, no caso de linhas, e horizontal, no caso de colunas. Veja algumas opções:

Quadro 4 - Disponibilidade do "align-itens"

Valor	Descrição
stretch	Força o item a ocupar todo o espaço disponível (padrão)
flex-start	Ocupa apenas o espaço necessário, alinhando de cima para baixo (no caso de linha).
flex-end	Ocupa apenas o espaço necessário, alinhando de baixo para cima (no caso de linha).
center	Ocupa apenas o espaço necessário, alinhando pelo centro.
baseline	Ocupa apenas o espaço necessário, alinhando o conteúdo do contêiner.

Align-content

A propriedade "align-content" controla o comportamento de como as linhas/colunas estarão alinhadas entre si. Veja algumas opções:

Quadro 5 - Disponibilidade do "align-content"

Valor	Descrição
stretch	Força as linhas/colunas a ocupar todo o espaço disponível (padrão)
flex-start	As linhas são compactadas em direção ao início do flex contêiner
flex-end	As linhas são compactadas em direção ao fim do flex contêiner
center	As linhas são compactadas em direção ao centro do flex contêiner
space-between	As linhas são distribuídas uniformemente no flex contêiner
space-around	As linhas são distribuídas uniformemente no flex contêiner, com metade do espaço nas extremidades
space-evenly	As linhas são distribuídas uniformemente no flex contêiner, com espaço igual ao redor delas

Termo de uso

arrow_back Aula 11 - HTML Layout