Flexbox – Facilitando a organizar a estrutura da sua página web
Conheça as principais propriedades e para que servem cada uma delas.
Antigamente os layouts das páginas web eram feitas com tabelas, como o passar do tempo as coisas evoluíram e as tabelas ficaram de lado e passamos a usar recursos do CSS como floats, display block ou inline-block, entre outros, para posicionar os elementos da página.
Porém as coisas (felizmente) não pararam de evoluir e uma das formas mais modernas hoje é o Flexbox que veio para facilitar (e muito) a forma de posicionar elementos nas páginas web.
Com o Flexbox podemos alinhar elementos tanto na horizontal como na vertical, além de ordená-los de forma diferente da que criamos no HTML.
Para usarmos o Flexbox em um elemento usamos a propriedade “display” e atribuímos a ela o valor “flex” ou “inline-flex”, como no código a seguir:
div {
display: flex; /* ou inline-flex */
}
Contudo, para que toda a mágica funcione precisamos ter um elemento “pai” (Flex Container), que irá receber a propriedade “display=flex;”, e pelo menos um elemento “filho” (Flex Itens), que terão que estar dentro do elemento pai, como no código a seguir:
<html>
<body>
<div class="container">
<div class="container__item container__item--1">Item 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="container__item container__item--2">Item 2 - Pellentesque ligula urna, iaculis eget.</div>
<div class="container__item container__item--3">Item 3 - Mauris condimentum risus nisi, hendrerit suscipit arcu tincidunt id. Praesent commodo, dolor at auctor suscipit, nibh libero gravida nunc, eu.</div>
</div>
</body>
</html>
Aqui criei uma div (container) que será o elemento “pai” e três divs (item) que são os elementos “filhos”, os chamados Flex Itens.
OBS.: Usarei essa mesma estrutura para todos os exemplos que citarei mais abaixo.
Vamos conhecer as propriedades e ver na prática como funciona o Flexbox:
Flex-direction:
A propriedade “flex-direction” é aplicada no Flex Container e define a direção em que você quer dispor os Flex Itens. Os valores que podem ser usados nessa propriedade são:
row:
Este é o valor padrão, onde os itens são alinhados em uma linha da esquerda para a direita.
Veja o código:
.container {
display: flex;
flex-direction: row;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
/* Os códigos usados daqui para baixo serão usados em todos os próximo exemplos, portanto, não irei repeti-los. */
.container__item {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
width: 300px;
box-sizing: border-box;
}
.container__item--1 {
padding: 10px;
background-color: blue;
}
.container__item--2 {
padding: 15px 10px;
background-color: yellow;
}
.container__item--3 {
padding: 5px 10px;
background-color: red;
}
row-reverse:
Os itens também são alinhados em linhas, porém em ordem reversa, ou seja, da direita para a esquerda.
Veja o código:
.container {
display: flex;
flex-direction: row-reverse;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
column:
Os itens são alinhados em colunas de cima para baixo.
Veja o código:
.container {
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
column-reverse:
Os itens são alinhados em colunas de forma reversa, ou seja, de baixo para cima.
Veja o código:
.container {
display: flex;
flex-direction: column-reverse;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
Flex-wrap
Por padrão os Flex Itens se ajustarão em uma única linha, independente da largura do Flex Container e é aí que entra a propriedade “flex-wrap”. Com ela você pode escolher entre criar uma quebra de linha ou simplesmente deixar que as divs filhas tentem se ajustar. Os valores que podem ser usados nessa propriedade são:
nowrap:
Este é o valor padrão, como dito acima com ele todos os itens que estiveremm dento do Flex Container serão alinhados em uma única linha mesmo que ultrapasse a largura do Flex Container.
Veja o código:
.container {
display: flex;
flex-wrap: nowrap;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
wrap:
Irá criar uma quebra de linhas se os itens ultrapassarem a largura do Flex Container e os últimos itens irão cair para uma nova linha.
Veja o código:
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
wrap-reverse:
Também criará uma quebra de linhas se os itens ultrapassarem a largura do Flex Container só que de forma reversa, ou seja, a ordem dos itens irá se inverter.
Veja o código:
.container {
display: flex;
flex-wrap: wrap-reverse;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
Justify-content
A propriedade “justify-content” serve para alinhar os Flex Itens horizontalmente. Os valores que podem ser usados nessa propriedade são:
flex-start:
Esse é o valor padrão, onde os Flex Itens ficam alinhados no início do Flex Container, ou seja, à esquerda.
Veja o código:
.container {
display: flex;
justify-content: flex-start;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
flex-end:
Os Flex Itens são alinhados ao fim do Flex Container, ou seja, à direita.
Veja o código:
.container {
display: flex;
justify-content: flex-end;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
center:
Os Flex Itens são alinhados no centro do Flex Container.
Veja o código:
.container {
display: flex;
justify-content: center;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
space-between:
Os Flex Itens se “espalharão” dentro do Flex Container, onde o primeiro ficará alinhado a esquerda, o último à direita e os que estiverem entre eles se espalharão de forma uniforme entre eles.
Veja o código:
.container {
display: flex;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
space-around:
Os Flex Itens também se “espalharão”, porém o primeiro e o último também terão um espaçamento nas extremidades.
Veja o código:
.container {
display: flex;
justify-content: space-around;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
Align-items
A propriedade “align-items” serve para alinhar os Flex Itens verticalmente. Os valores que podem ser usados nessa propriedade são:
stretch:
Esse é o valor padrão, onde os Flex Itens se esticam para ocupar o mesmo espaço verticalmente.
Veja o código:
.container {
display: flex;
align-items: stretch;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
flex-start:
Os Flex Itens são alinhados no início do Flex Container, ou seja, à esquerda.
Veja o código:
.container {
display: flex;
align-items: flex-start;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
flex-end:
Os Flex Itens são alinhados ao fim do Flex Container, ou seja, à direita.
Veja o código:
.container {
display: flex;
align-items: flex-end;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
center:
Os Flex Itens são alinhados no centro.
Veja o código:
.container {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
baseline:
Os Flex Itens são alinhados pela base da primeira linha de texto.
Veja o código:
.container {
display: flex;
align-items: baseline;
width: 100%;
box-sizing: border-box;
background-color: rgba(200,200,200,1);
}
Existem várias outras propriedades no Flexbox que são um pouco mais complexas, mas nesse artigo me detive ao básico. Usando apenas essas propriedades citadas acima garanto que facilitará muito a forma de organizar a sua página além de eliminar de vez a necessidade de usar a propriedade float que pelo menos para mim dava mais dor de cabeça do que ajudava.
Dica:
Quando comecei a pesquisar sobre Flexbox encontrei um jogo chamado Flexbox Froggy onde a ideia é que você ajude o sapo Froggy e seus amigos dando comandos com propriedades do Flexbox o que ajuda a compreender os funcionamento das propriedades que citei nesse artigo. É um jogo bem simples, mas para quem ainda não conhece ou não tem costume de usar o Flexbox será de grande ajuda, vale a pena conferir.