O módulo CSS Flexible Box Layout, ou simplesmente Flexbox Layout, é uma Candidate Recommendation (CR) da W3C que visa proporcionar uma forma mais eficiente para alinhar e distribuir o espaço entre itens de uma página HTML, independente do tamanho desses itens. O nome Flexbox vem muito a calhar, pois, os elementos são flexíveis e relativos ao tamanho da tela, você pode vê-los aumentar ou diminuir de tamanho apenas redimensionando a tela do seu navegador.
A ideia por trás das caixas flexíveis do módulo Flexbox é dar a possibilidade de elementos "pai" redimensionarem o tamanho (width e height) dos seus elementos filhos, para que estes fiquem na ordem desejada e acomodem-se ao tamanho da tela em que o usuário deseja visualizar o conteúdo da página.
Outro fato interessante do Flexbox Layout é que você não está limitado quanto à posição dos elementos da sua página, ou seja, um elemento pode ser adicionado ao final do seu código HTML e ser apresentado como o primeiro elemento da página, apenas alterando a sua propriedade CSS order: <número>.
Vamos ver como isso funciona na prática logo abaixo.
Flexbox precisa de "pai" e "filho(s)"
Se você trabalha como desenvolvedor, deve saber que existem alguns elementos que dependem de outros para que algumas propriedades CSS funcionem, como é o caso de elementos com posição absoluta dentro de elementos com posição relativa, além de outros.
Com Flexbox isso não é diferente, você pode ter um (ou vários) elemento(s) "pai" e seus elementos "filhos" receberão as propriedades que você indicar, como por exemplo, se eles serão alinhados como "linha" (row) ou coluna (column).
Veja um exemplo:
Nesse caso, o HTML seria algo parecido com:
<div class="pai"> <div class="filho">1</div> <div class="filho">2</div> <div class="filho">3</div> </div>
Com essa estrutura em mente, vamos ver um pouco mais de perto as propriedades do módulo Flexbox.
display: flex;
Propriedade do elemento pai.
Para começar, você pode definir um container flexível (flex) com as propriedades flex ou inline-flex, que correspondem, respectivamente, à propriedades block e inline.
.pai{
display: flex ou inline-flex;
}Isso ainda não fará nada ao seu elemento, pois, você precisa das outras propriedades. Você verá exemplos mais adiante.
order
Propriedade do elemento filho.
Como eu disse no início do artigo, "filhos" de um elemento flexbox não precisam de uma ordem no seu documento HTML, você pode escolher essa ordem utilizando a propriedade order.
.pai > .filho:nth-child(1){
order:3;
} Neste casso, o elemento com classe filho que está na posição 1, apareceria na terceira posição.
Codepen 1
flex-direction
Propriedade do elemento pai.
Elementos filhos de uma elemento flexbox, são baseados em eixos (main e cross), sendo o eixo main tratando da parte horizontal da página e o cross da parte vertical. Sendo assim, flex-direction representa a direção em que os filhos do elemento flexbox serão posicionados, em modo linha (row) ou coluna (column).
As propriedades aceitas são:
-
row– Linha -
row-reverse– Linha de maneira invertida -
column– Coluna -
column-reverse– Coluna de maneira invertida
Codepen 2.
flex-grow
Propriedade do elemento filho.
Essa é uma propriedade extremamente interessante, ela descreve que qualquer um dos elementos filhos podem "crescer" para se adaptar ao conteúdo. O padrão é 0, para não crescer, se você modificar este valor para 1, o elemento filho que recebeu essa propriedade sempre vai se adequar ao tamanho da tela utilizando os espaços que sobraram.
.pai{
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width:1200px;
margin:0 auto;
background:#ccc;
}
.pai > .filho{
width:50%;
height:100px;
background:purple;
color:#fff;
}
.pai > .filho:nth-child(1){
background:yellow;
color:#000;
flex-grow:1;
}
.pai > .filho:nth-child(2){
background:pink;
color:#000;
}
.pai > .filho:nth-child(3){
flex-grow:1;
}Codepen 3.
flex-wrap
Propriedade do elemento pai.
Por padrão, os filhos do elemento tentarão se adaptar em uma única linha, porém, você pode modificar isso com flex-wrap.
.pai{
flex-wrap: nowrap | wrap | wrap-reverse;
}A primeira opção acima, é padrão, a segunda, faz com que os filhos "quebrem" a linha se for necessário, a terceira faz o mesmo, porém de maneira inversa:
.pai{
display: flex;
flex-direction: row;
/* WRAP-REVERSE */
flex-wrap: wrap-reverse;
max-width:1200px;
margin:0 auto;
background:#ccc;
}
.pai > .filho{
width:50%;
height:100px;
background:purple;
color:#fff;
}
.pai > .filho:nth-child(1){
background:yellow;
color:#000;
flex-grow:1;
}
.pai > .filho:nth-child(2){
background:pink;
color:#000;
}
.pai > .filho:nth-child(3){
flex-grow:1;
}Codepen 4.
justify-content
Propriedade do elemento pai.
Esqueça suas margens, essa propriedade calcula tudo para você. Veja seus valores:
-
flex-start(padrão): filhos começam a ser exibidos do começo -
flex-end: filhos começam a ser exibidos do fim -
center: filhos centralizados -
space-between: primeiro filho encostado no começo do elemento pai, último filho encostado na linha final do pai, os outros filhos (do meio) terão espaços iguais entre eles. -
space-around: espaço do elemento pai dividido igualmente entre os elementos filhos.
Veja um "Codepen" de exemplo:
Codepen 5.
Muito bom!
align-items
Propriedade do elemento pai.
Essa propriedade faz quase a mesma coisa do exemplo anterior, porém, ela alinha os elementos baseando-se do eixo cross (vertical). Veja seus valores:
-
flex-start: filhos começam a ser exibidos do começo -
flex-end: filhos começam a ser exibidos do fim -
center: centralizados -
baseline: filhos são alinhados como suas baselines -
stretch(padrão): Esticam para ocupar todo o espaço do pai
Veja um exemplo de código:
.pai{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
max-width:1200px;
height:540px;
margin:0 auto;
background:#eee;
}Agora um exemplo rodando no navegador (Codepen):
Codepen 6.
align-self
Propriedade do elemento filho.
Essa opção da a possibilidade de alinhar um único filho em posições diferentes do que a escolhida nas opções do elemento pai.
Suas opções são as mesmas da propriedade anterior:
-
flex-start: filhos começam a ser exibidos do começo -
flex-end: filhos começam a ser exibidos do fim -
center: centralizados -
baseline: filhos são alinhados como suas baselines -
stretch(padrão): Esticam para ocupar todo o espaço do pai
Veja um exemplo de código:
.pai > .filho:nth-child(3){
align-self: flex-end;
}Agora um "Codepen" (Não pode faltar, né!).
CodePen 7.
Mais propriedades
Além de tudo o que eu disse anteriormente, ainda existem mais propriedades. Aconselho que você leia os artigos abaixo, de onde tirei maioria dos exemplos do que você leu acima:
Caso tenha alguma dúvida, critica ou correção, mande nos comentários.
