9

CSS3 Flexbox com exemplos

#CSS
Gustavo Pereira
Gustavo Pereira

Olá comunidade DEV!


Esse é meu primeiro artigo aqui e espero que possa contribuir no desenvolvimento de layouts front-end com a utilização da feature Flexbox!


CSS flexbox.


Introdução


Flexbox é um dos maiores recursos que foram adicionados ao CSS. Ele foi projetado como um modelo de layout unidimensional e como um método que pode oferecer distribuição de espaço entre os itens em uma interface e recursos poderosos de alinhamento.

O Flexbox torna mais fácil projetar estruturas de layouts responsivos e flexíveis sem usar flutuação ou posicionamento.

Neste artigo, aprenderemos sobre CSS Flexbox com alguns exemplos práticos. Vamos direto ao assunto.


Definindo um container


Para começar a usar o flexbox, você precisará definir um container div ou pai div onde envolverá todos os elementos filhos desta forma:


<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>


O pai div ou o container torna-se flexível definindo a propriedade display como  flex :


.container {
  display: flex;
  background-color: red;
}
.container div{
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}


Aqui está o resultado:


Um contêiner vermelho que contém três divs flexíveis.


Como você pode ver, ao definir a propriedade display como  flex , os elementos filhos do container tornam-se automaticamente flex-items. Agora você pode usar as propriedades do container, como justify-content align-items por exemplo, para centralizar seus elementos filho dentro do div do container. Abordaremos isso nos exemplos abaixo.


Propriedade flex-direction


A propriedade flex-direction define em qual direção o container deseja empilhar os flex-items (coluna ou linha).


O exemplo abaixo define a direção flexível para column (de cima para baixo). Como resultado, os elementos filho dentro do div do container estarão em uma linha vertical.


Dê uma olhada nos exemplos abaixo:


.container {
  display: flex;
  flex-direction: column;
  background-color: red;
}
.container div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}


Aqui está o resultado:


Direção da coluna Flexbox.


Aqui está o mesmo exemplo, mas vamos definir a propriedade flex-direction para row que fará com que os elementos filhos fiquem em uma linha horizontal no interior do nosso container:


.container {
  display: flex;
  flex-direction: row;
  background-color: red;
}
.container div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}


Resultado:


Direção da linha do Flexbox.


Você também pode inverter a ordem dos elementos filho dentro do container definindo a propriedade flex-direction como column-reverse ou row-reverse.


Propriedade flex-wrap


A propriedade flex-wrap especifica se os flex-items devem ser agrupados ou não.


O exemplo abaixo tem 12 flex-items e define a propriedade flex-wrap como wrap. Para melhor demonstrar a propriedade flex-wrap. Eu recomendo que você coloque o código abaixo em seu editor de texto ou no Codepen e redimensione a janela do navegador para ver o poder do flex-wrap.


Html:
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

CSS:
.container {
  display: flex;
  flex-wrap: wrap;
  background-color: red;
}

.container div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}


Se desejar que os elementos filhos ou os flex-items para não "embrulhar", você pode definir a propriedade flex-direction para nowrap assim:


.container {
  display: flex;
  flex-wrap: nowrap;
  background-color: red;
}


Propriedade justify-content


A propriedade justify-content é usada para alinhar os flex-items. Você pode dar a esta propriedade alguns valores, tais como: centerflex-startflex-endspace-between e etc.


O valor center alinha os flex-items no centro do container:


.container {
  display: flex;
  justify-content: center;
}


Image for post


O valor flex-start alinha os flex-items no início do container:


.container {
  display: flex;
  justify-content: flex-start;
}


Imagem para postagem


O valor flex-end alinha os flex-items no final do container:


.container {
  display: flex;
  justify-content: flex-end;
}


Imagem para postagem


O valor space-between mostra os flex-items com espaço entre eles:


.container {
  display: flex;
  justify-content: space-between;
}


Image for post


Propriedade align-items


A propriedade align-items é usada para alinhar os flex-items. É o mesmo que justify-content , mas trabalhamos verticalmente em vez de horizontalmente. É por isso que darei apenas um exemplo em vez de repetir os mesmos exemplos.


Portanto, aqui está um exemplo que centraliza os elementos filho verticalmente dentro do container:


.container {
  display: flex;
  height: 300px;
  align-items: center;
  background-color: red;
}
.container div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}


Resultado:


Image for post


A propriedade align-items tem os mesmos valores que justify-content. A única diferença é que estamos trabalhando verticalmente em vez de horizontalmente.


Centralizando verticalmente e horizontalmente


Agora você pode usar justify-contentalign-items para centralizar facilmente seus elementos filhos verticalmente e horizontalmente.


Aqui está um exemplo:


.container {
  display: flex;
  height: 300px;
  align-items: center;
  justify-content: center;
  background-color: red;
}
.container div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}


Image for post


Outras propriedades de elementos filhos


Os elementos filhos também têm algumas propriedades das quais você pode explorar, como:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self


Você pode aprender sobre eles no site w3schools.


Conclusão


O Flexbox é um recurso CSS incrível que permite criar facilmente uma estrutura de layout responsiva e flexível. Eu recomendo que você pratique esse recurso porque a prática é a única maneira de ficar melhor nisso.


Espero que este artigo tenha sido útil! Gostou? Aperta "^" ali em cima do lado esquerdo 😊


Outras fontes:


https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox


https://css-tricks.com/snippets/css/a-guide-to-flexbox/



Gustavo Pereira

https://github.com/gustavofpereira

https://www.linkedin.com/in/gustavo-pereira-915b4a/

4
125

Comentários (4)

0
Clovis Costa

Clovis Costa

20/01/2021 00:29

Rapaz. Já conhecia o FlexBox mas você deixou muito mais óbvio pra entender. Parabéns e obrigado pelo artigo.

0
R

Renato Alencar

19/01/2021 18:41

Muito obrigado pelo artigo com exemplos simples e explicação didática. Excelente iniciativa.

0
Claudinei Nobrega

Claudinei Nobrega

19/01/2021 13:07

Parabéns Gustavo pela iniciativa !!!

0
Eder Teixeira

Eder Teixeira

15/01/2021 01:24

Gustavo,


Parabéns pelo artigo, muito bem explicado e bem completo.


Em transição para a área de TI - Estudando Coding na Uninassau

Brasil