Container Flex

O Container Flex é como chamamos o elemento da página que envolve os itens flex, ao indicar display: flex, a tag passa a ser um elemento flexível, habilitando também algumas propriedades ao itens que estão dentro desta tag.

display

Torna o elemento um flex container automaticamente transformando todos os seus filhos diretos em flex itens.

Exemplo:

CSS 
.container {
       display: flex;
}

flex-direction

Define a direção dos flex itens. Por padrão ele é row (linha), por isso quando o {display: flex;} é adicionado, os elementos ficam em linha, um do lado do outro.

A mudança de row para column geralmente acontece quando estamos definindo os estilos em media queries para o mobile. Assim você garante que o conteúdo seja apresentado em coluna única.

Selecione um valor para ver o exemplo:

flex-direction:

1
2
3
4
5
6
7
8
9
10

flex-wrap

Define se os itens devem quebrar ou não a linha. Por padrão eles não quebram linha, isso faz com que os flex itens sejam compactados além do limite do conteúdo.

Essa é geralmente uma propriedade que é quase sempre definida como "flex-wrap: wrap;" Pois assim quando um dos flex itens atinge o limite do conteúdo, o último item passa para a coluna debaixo e assim por diante.

Selecione um valor para ver o exemplo:

flex-wrap:

1
2
3
4
5
6
7
8
9
10

flex-flow

O flex-flow é um atalho para as propriedades flex-direction e flex-wrap. Você não verá muito o seu uso, pois geralmente quando mudamos o flex-direction para column, mantemos o padrão do flex-wrap que é nowrap.

E quando mudamos o flex-wrap para wrap, mantemos o padrão do flex-direction que é row.

Selecione um valor para ver o exemplo:

flex-flow:

1
2
3
4
5
6
7
8
9
10

justify-content

Alinha os itens flex no container de acordo com a direção. A propriedade só funciona se os itens atuais não ocuparem todo o container. Isso significa que ao definir flex: 1; ou algo similar nos itens, a propriedade não terá mais função.

Excelente propriedade para ser usada em casos que você deseja alinhar um item na ponta esquerda e outro na direita, como em um simples header com marca e navegação.

Selecione um valor para ver o exemplo:

justify-content:

1
2
3

align-items

O align-items alinha os flex itens de acordo com o eixo do container. O alinhamento é diferente para quando os itens estão em colunas ou linhas.

Essa propriedade permite o tão sonhado alinhamento central no eixo vertical, algo que antes só era possível com diferentes hacks.

Selecione um valor para ver o exemplo:

align-items:

Lorem, ipsum.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet consectetur.

align-content

Alinha as linhas do container em relação ao eixo vertical. A propriedade só funciona se existir mais de uma linha de flex-itens. Para isso o flex-wrap precisa ser wrap.

Além disso o efeito dela apenas será visualizado caso o container seja maior que a soma das linhas dos itens. Isso significa que se você não definir height para o container, a propriedade não influencia no layout.

Selecione um valor para ver o exemplo:

align-content:

1
2
3
4
5
6
7
8
9
10

gap

A propriedade gap controla o espaço entre os itens flexíveis. Aplicando espaço entre os itens e não nos espaços de fora.

Selecione um valor para ver o exemplo:

gap:

1
2
3
4
5
6
7
8
9
10

row-gap:

1
2
3
4
5
6
7
8
9
10

column-gap:

1
2
3
4
5
6
7
8
9
10

Itens Flex

Os Flex Itens são os filhos diretos do Flex Container, lembrado que uma tag se torna um flex container a partir do momento que você definir display: flex.

É possível que um Flex Item seja também um Flex Container, basta definir display: flex nele. Assim os filhos desse item também serão flex itens.

under construction
arrow