Artigos de Tecnologia e Negócios > Front-end

CSS FlexBox: Um Guia Visual

Juliana Amoasei dos Reis
Juliana Amoasei dos Reis

Vamos aprender os fundamentos do CSS Flexbox para alinhamento e posicionamento, e como utilizar suas funcionalidades corretamente.

O que é o Flexbox

Por muito tempo, as únicas ferramentas disponíveis para a criação de leiautes em CSS e posicionar elementos com boa compatibilidade entre browsers eram float e position. Porém, essas ferramentas possuem algumas limitações muito frustrantes, especialmente no que diz respeito à responsividade. Algumas tarefas que consideramos básicas em um leiaute, como centralização vertical de uma div-filha com relação a uma div-mãe ou fazer com que divs-filhas ocupem a mesma quantidade de espaço e colunas terem o mesmo tamanho independente da quantidade de conteúdo interno, eram impossíveis ou muito difíceis de serem manejadas com floats ou position, ao menos de forma prática e flexível.

A ferramenta Flexbox (de Flexible Box) foi criada para tornar essas tarefas mais simples e funcionais: as filhas de um elemento com Flexbox podem se posicionar em qualquer direção e pode ter dimensões flexíveis para se adaptar.

Elementos

Flex container é o elemento que envolve sua estrutura. Você define que um elemento é um Flex Container com a propriedade display e valores flex ou inline-flex.

  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  .flex-container {
    display: flex;
  }

Flex Item são elementos-filhas do flex container.

Eixos ou Axes são as duas direções básicas que existem em um Flex Container: main axis, que seria o eixo horizontal ou o eixo principal, e cross axis que seria o eixo vertical.

Propriedades para o elemento-mãe

container flex

Quando utilizamos o Flexbox, é muito importante saber quais propriedades são declaradas no elemento-mãe (por exemplo, uma div que irá conter os elementos a serem alinhados) e quais serão declaradas nos elementos-filhas. Abaixo, seguem algumas propriedades que devem ser declaradas utilizando o elemento-mãe como seletor (para alinhar elementos-filhas):

flex-direction determina a origem e o término do fluxo dos ítens. Eles seguem o vetor estabelecido pelo modo tradicional de escrita: esquerda para direita em row, cima para baixo em column, ou no sentido inverso utilizando -reverse.

  .flex-container {
    flex-direction: row | row-reverse | column | column-reverse;
  }

flex-direction

Você pode definir se os elementos serão forçados a ficar em uma mesma linha ou se eles irão quebrar em várias linhas com a propriedade flex-wrap.

  .flex-container {
    flex-wrap: nowrap | wrap | wrap-reverse;
  }

flex-wrap

A propriedade flex-flow é uma propriedade shorthand (uma mesma declaração inclui vários valores relacionados a uma mesma propriedade) que inclui flex-direction e flex-wrap. Determina a ordem do fluxo em que os elementos aparecerão.

O justify-content define o alinhamento das filhas ao longo do eixo principal.

  .flex-container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  }

justify-content

align-items define o comportamento padrão de como flex items são alinhados de acordo com o eixo vertical (cross axis). De certa forma, funciona de forma similar ao justify-content, porém no eixo perpendicular.

  .flex-container {
    align-items: stretch | flex-start | flex-end | center | baseline;
  }

align-items

align-content alinha o conteúdo dentro do container quando há espaço extra no eixo vertical, similar à forma que justify-content alinha ítens individuais dentro do eixo principal.

  .flex-container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  }

align-content

Propriedades para elementos-filhas

A seguir, veremos propriedades que devem ser declaradas tendo como seletor elementos-filhas, ou seja:

  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>

Isso significa que, onde existe um elemento-mãe com propriedade flex, é possível atribuir propriedades flex específicas também para as filhas.

A propriedade order determina o lugar que os elementos aparecerão.

  .flex-item {
    order: <numero>; /* o valor default(padrão) é 0 */
  }

order

flex-grow define a habilidade de um elemento-filha de "crescer" e ocupar uma área maior, se necessário. Por exemplo, se em uma lista de 3 filhas, 2 delas têm propriedade flex-grox: 1 e 1 delas tem flex-grow:2, essa última crescerá para ocupar o dobro do tamanho das irmãs.

  .flex-item {
    flex-grow: <numero>; /* o valor default(padrão) é 0 */
  }

grow

align-self permite que o alinhamento padrão (definido por align-items) seja sobrescrito para ítens individuais.

  .flex-item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }

align-self

Existem outras propriedades para as filhas, como flex-shrink, flex-basis e a shorthand flex, você pode pesquisar sobre elas para aumentar seu repertório.

Importante!

Vamos praticar?

Flexbox Froggy

Links úteis

Assim como qualquer outra nova funcionalidade que aprendemos, é fundamental praticar bastante e pesquisar sempre que temos dúvidas. A seguir, alguns links úteis.

Este conteúdo se baseia em grande parte no tutorial da CSS Tricks, com nossos agradecimentos! Guarde nos seus favoritos para consultar sempre que precisar.

Gostou do post e quer saber mais? Aqui na Alura temos uma formação front-end onde você vai aprender mais sobre HTML e CSS

Artigos de Tecnologia e Negócios > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana