O guia definitivo de Flexbox

Visão geral

O Flexbox Layout, oficialmente reconhecido como CSS Flexible Box Layout Module, é um modelo de layout em CSS.

O Flexbox é um layout unidimensional, o que significa que dispõe os itens numa dimensão de cada vez, quer como linha quer como coluna, mas não em ambas ao mesmo tempo. Isto contrasta com o modelo bidimensional — o CSS Grid Layout, que dispõe os itens em duas dimensões em simultâneo (linhas e colunas em conjunto).

O Flexbox foi introduzido como alternativa aos Floats do CSS para definir o aspeto geral de uma página web. O Flexbox traz muitas vantagens; em particular, permite-lhe controlar o alinhamento, a direção, a ordem e o tamanho dos itens.

Os itens dentro de um contentor flex:

podem ser organizados em qualquer direção (para a esquerda, para a direita, para baixo ou mesmo para cima) (flex-direction).
podem ter ordem direta (da esquerda para a direita) ou invertida (da direita para a esquerda).
podem ter largura e altura "flex" para preencher o espaço disponível (flex-item).
podem ser definidos para se contraírem ou expandirem dinamicamente ao longo do eixo principal, mantendo entretanto o tamanho do eixo transversal secundário.
podem ser organizados linearmente ao longo do eixo principal ou dispostos em várias linhas ao longo ou através do eixo transversal.

O Flexbox é relativamente recente, mas hoje em dia conta com um excelente suporte por parte dos browsers.

(Saiba mais sobre o suporte e a compatibilidade dos browsers).

Noções básicas de Flexbox

Quando trabalha com Flexbox, tem de pensar em termos de dois eixos — o eixo principal e o eixo transversal — e deve distinguir entre contentores flex e itens flex.

Eixo principal e eixo transversal

O Flexbox é um layout orientado a um único eixo; tem um eixo principal e um eixo transversal. Isto significa que os itens são dispostos ao longo do eixo principal ou do eixo transversal. O eixo transversal é sempre perpendicular ao principal.

O eixo principal é definido pela propriedade flex-direction, que tem os seguintes valores:

row
row-reverse
column
column-reverse

Se a propriedade flex-direction for especificada com os valores row ou row-reverse, o seu eixo principal será horizontal, ou seja, percorrerá a linha na direção inline. E o eixo transversal percorrerá as colunas.

Se a propriedade flex-direction for especificada com os valores column ou column-reverse, o eixo principal será vertical, ou seja, percorrerá a página de cima para baixo na direção de bloco. Quanto ao eixo transversal, este percorrerá as linhas.

Observe esta figura para compreender melhor o conceito subjacente aos eixos do Flexbox.

eixo principal - O eixo principal de um contentor flex é o eixo ao longo do qual os itens flex são colocados.
main-start | main-end - Os itens flex são dispostos dentro do contentor a partir de main-start e em direção a main-end.
main size - A largura ou a altura de um item flex na dimensão principal é o main size do item.
eixo transversal - O eixo perpendicular ao eixo primário, cuja direção depende da direção do eixo principal (horizontal ou vertical).
cross-start | cross-end - As linhas flex são preenchidas com itens e colocadas no contentor a partir do lado cross-start do contentor flex e em direção ao lado cross-end.
cross size - A largura ou a altura de um item flex na dimensão transversal é o cross size do item.

Fonte: W3.org

Contentores e itens flex

O contentor flex é um elemento pai que agrupa um conjunto de elementos filhos, os itens flex. Na maioria dos casos, o contentor define o layout e a posição dos seus itens flex; contudo, os itens flex podem ser manipulados individualmente.

Para transformar um elemento HTML num contentor flex, deve utilizar a propriedade display com os valores flex (caixa de contentor flex ao nível de bloco) ou inline-flex (define uma caixa de contentor flex ao nível inline). Caso contrário, o browser ignoraria todas as propriedades flexbox que utilizou.

Contentor Flexbox

.container {
  display: flex; /* or inline-flex*/
}

Propriedades do contentor flex

A propriedade flex-direction

A propriedade flex-direction é utilizada para criar layouts em linha e em coluna. Especifica as direções do eixo principal do contentor flex e define a ordem pela qual os itens aparecem.

A propriedade flex-direction tem os seguintes valores:

row - os itens são apresentados ao longo da linha, da esquerda para a direita.
row-reverse - os itens são apresentados da direita para a esquerda.
column - os itens são apresentados verticalmente, de cima para baixo.
column-reverse - os itens são apresentados verticalmente, de baixo para cima.

Exemplo da propriedade flex-direction:

Exemplo da propriedade flex-direction

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h3 {
        color: #8ebf42;
      }
      .flex-container {
        display: flex;
        flex-direction: row-reverse;
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 80px;
        height: 70px;
        margin: 5px;     
        border-radius: 3px;
        background-color: #1faadb;
      }
    </style>
  </head>
  <body>
    <h3>row-reverse</h3>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

No nosso exemplo, os itens estão organizados por ordem invertida. Altere os valores da propriedade flex-direction (row, column, column-reverse) para ver como o aspeto dos itens muda.

Informação

Nota: row e row-reverse dependem do modo de escrita, pelo que num contexto rtl (da direita para a esquerda) serão invertidos em conformidade.

A propriedade flex-wrap

Por predefinição, todos os itens flex cabem numa só linha e, se os itens flex forem demasiado largos para o contentor, irão transbordar dele. Para evitar isto, deve utilizar a propriedade flex-wrap para mudar os itens de linha.

A propriedade pode aceitar os seguintes valores:

nowrap (predefinição) - os itens flex são apresentados numa só linha; por predefinição, ajustam-se à largura do contentor flex.
wrap - os itens flex são apresentados em várias linhas, se necessário, da esquerda para a direita e de cima para baixo.
wrap-reverse - os itens flex são apresentados em várias linhas, se necessário, da esquerda para a direita e de baixo para cima.

Informação

Nota: a propriedade depende do modo de escrita, pelo que num contexto rtl (da direita para a esquerda) serão invertidos em conformidade.

A propriedade justify-content

A propriedade justify-content é utilizada para definir o alinhamento horizontal dos itens ao longo do eixo principal. Ajuda a distribuir o espaço livre que sobra entre os itens flex no eixo principal.

Os valores de justify-content são os seguintes:

flex-start (valor predefinido) - os itens são dispostos no início do contentor.
flex-end - os itens são dispostos no fim do contentor.
center - os itens são dispostos no centro do contentor.
space-between - os itens são distribuídos de forma uniforme na linha (com espaço entre eles); o primeiro item fica na linha inicial e o último na linha final.
space-around - os itens são apresentados com espaço antes, entre e depois deles.
space-evenly - os itens são distribuídos de modo a que o espaçamento entre quaisquer dois itens (e o espaço até às extremidades) seja igual.

Exemplo da propriedade justify-content:

Propriedade justify-content, exemplos

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        padding: 10px;
        margin-bottom: 20px;
        background-color: #1faadb;
      }
      .flex-start {
        justify-content: flex-start;
      }
      .flex-end {
        justify-content: flex-end;
      }
      .center {
        justify-content: center;
      }
      .space-between {
        justify-content: space-between;
      }
      .space-around {
        justify-content: space-around;
      }
      .flex-container > div {
        width: 28%;
        height: 45px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container > div.item-two {
        width: 18%;
      }
    </style>
  </head>
  <body>
    <p>flex-start</p>
    <div class="flex-container flex-start">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>flex-end</p>
    <div class="flex-container flex-end">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>center</p>
    <div class="flex-container center">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>space-between</p>
    <div class="flex-container space-between">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>space-around</p>
    <div class="flex-container space-around">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Altere o valor da propriedade justify-content para ver como os itens são alinhados.

A propriedade align-items

A propriedade align-items é utilizada para alinhar os itens ao longo do eixo transversal. É precisamente o oposto da propriedade justify-content, que alinha os itens ao longo do eixo principal.

Os valores de align-items são os seguintes:

stretch (predefinição) - os itens são esticados para preencher o contentor.
flex-start - os itens são empilhados no início (cross start) do contentor.
flex-end - os itens são empilhados no fim (cross end) do contentor.
center - os itens são empilhados no centro do eixo transversal.
baseline - os itens são alinhados de acordo com as suas linhas de base.

Informação

Nota: se a altura do contentor flex estiver limitada, o valor stretch pode fazer com que o conteúdo do item flex transborde para fora do item.

Exemplo da propriedade align-items:

Propriedade align-items, exemplo de código

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: space-between;
        align-items: center; /* Use another value to see the result */
        height: 250px;
        padding: 15px;
        background-color: #1faadb;
      }
      .flex-container > div {
        width: 15%;
        height: 100%;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container .one {
        height: 60%;
      }
      .flex-container .three {
        height: 40%;
      }
      .flex-container .four {
        height: 70%;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="four"></div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

No nosso exemplo, utilizámos o valor center para centrar os itens no eixo transversal. Experimente outros valores e veja o resultado.

A propriedade align-content

A propriedade align-content é utilizada para alinhar as linhas de um contentor flex dentro do contentor quando existe espaço extra no eixo transversal, tal como justify-content alinha os itens individuais ao longo do eixo principal.

Informação

Nota: a propriedade align-content não funciona quando existe apenas uma linha no contentor flex.

Os valores de align-content e o seu significado são os seguintes:

stretch (predefinição) - as linhas esticam-se para ocupar o espaço disponível.
flex-start - as linhas são agrupadas no início do contentor.
flex-end - as linhas são agrupadas no fim do contentor.
center - as linhas são agrupadas no centro do contentor.
space-between - as linhas são distribuídas de forma uniforme; a primeira linha fica no início do contentor e a última no fim.
space-around - as linhas são distribuídas de forma uniforme, com espaço igual à volta de cada linha.

Exemplo da propriedade align-content:

Exemplo da propriedade align-content

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end/* Use another value to see the result */;
        min-height: 250px;
        padding: 10px;
        background-color: #1faadb;
      }
      .flex-container>div {
        width: 45%;
        height: 45px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container .one,
      .flex-container .nine {
        width: 23%;
      }
      .flex-container .two,
      .flex-container .six {
        width: 9%;
      }
      .flex-container .three {
        width: 25%;
      }
      .flex-container .four {
        width: 35%;
      }
      .flex-container .five,
      .flex-container .eleven {
        width: 32%;
      }
      .flex-container .seven,
      .flex-container .ten {
        width: 6%;
      }
    </style>
  </head>
  <body>
    <p>flex-end</p>
    <div class="flex-container">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="four"></div>
      <div class="five"></div>
      <div class="six"></div>
      <div class="seven"></div>
      <div class="eight"></div>
      <div class="nine"></div>
      <div class="ten"></div>
      <div class="eleven"></div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

A propriedade gap

A propriedade gap é utilizada para definir o espaço entre os itens flex.

A propriedade flex-flow

Esta é uma propriedade abreviada (shorthand) para as propriedades individuais flex-direction e flex-wrap, que em conjunto definem os eixos principal e transversal do contentor flex. O valor predefinido é row nowrap.

Informação

Nota: as direções de flex-flow são sensíveis ao modo de escrita, pelo que num contexto rtl (da direita para a esquerda) o conteúdo será invertido em conformidade.

Exemplo da propriedade flex-flow:

Propriedade flex-flow, exemplo de código

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title> 
    <style>
      .flex-container {
        display: flex;
        flex-flow: row-reverse wrap; /* Use another value to see the result */
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 30%;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        line-height: 70px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Pode escolher outro valor para ver como a posição dos itens muda.

Propriedades dos itens flex

A propriedade order

Por predefinição, os itens são dispostos pela ordem em que aparecem no código-fonte (a começar pelo grupo ordinal de número mais baixo e a subir). Para alterar a ordem dos itens no contentor flex, utiliza-se a propriedade order.

A propriedade order define a ordem dos itens flex, atribuindo-os a grupos ordinais. Aceita um único valor inteiro, que define o grupo ordinal a que o item flex pertence. O valor predefinido é 0.

Exemplo da propriedade order:

Ordem da propriedade order do flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        flex-flow: row wrap;
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 30%;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        line-height: 70px;
        color: #fff;
      }
      .item-one { 
        order: 1;
      }
      .item-four {
        order: -1;
      }
      .item-five { 
        order: 0;
      }
      .item-three { 
        order: 2;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="item-one">1</div>
      <div class="item-two">2</div>
      <div class="item-three">3</div>
      <div class="item-four">4</div>
      <div class="item-five">5</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

A propriedade align-self

Esta propriedade é utilizada para alinhar individualmente os itens dentro do contentor flex. Os itens flex são alinhados no eixo transversal da linha do contentor flex (tal como justify-content, mas na direção perpendicular). Quando definida, a propriedade align-self substitui o alinhamento especificado por align-items.

Informação

Nota: se alguma das margens do item no eixo transversal estiver definida como auto, então align-self é ignorada.

A propriedade align-self tem os mesmos valores que align-items. Estão listados em baixo para sua comodidade.

stretch (predefinição) - os itens são esticados para preencher o contentor.
flex-start - os itens são empilhados no início (cross start) do contentor.
flex-end - os itens são empilhados no fim (cross end) do contentor.
center - os itens são empilhados no centro do eixo transversal.
baseline - os itens são alinhados de acordo com as suas linhas de base.

Exemplo da propriedade align-self:

Exemplo da propriedade align-self

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: space-between;
        height: 300px;
        padding: 10px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 15%;
        height: 80%;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      div.item-two {
        width: 20%; 
      }
      div.item-three {
        align-self: flex-end;
        height: 80px; 
        margin: 0 10%;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="item-one"></div>
      <div class="item-two"></div>
      <div class="item-three"></div>
      <div class="item-four"></div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

A propriedade flex-grow

A propriedade flex-grow define a capacidade de um item crescer, se necessário. Define o fator de crescimento flex (relativamente aos restantes itens dentro de um contentor), que especifica o espaço que o item deve ocupar no contentor ao distribuir o espaço positivo.

A propriedade aceita um valor sem unidade que funciona como uma proporção.

Informação

Nota: o valor não pode ser um número negativo.

Se todos os itens do contentor tiverem o mesmo valor de flex-grow (por exemplo, 1), então todos os itens terão o mesmo tamanho no contentor.

Se o tamanho de um dos itens flex for diferente (por exemplo, 2), então esse item ocupará o dobro do espaço relativamente ao tamanho dos outros itens (cujo tamanho está definido como 1).

Exemplo da propriedade flex-grow:

Propriedade flex-grow, exemplo de código

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        margin-bottom: 20px;
      }
      .flex-container div {
        flex-grow: 0.2;
        padding: 30px 5px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
      }
      .flex-container div.two {
        flex-grow: 5;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div>
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div><span>5</span>
      </div>
    </div>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div class="two">
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Dica

Recomendamos a utilização da propriedade abreviada flex em vez de flex-grow para controlar a flexibilidade, pois repõe corretamente quaisquer componentes não especificados, adequando-se às utilizações mais comuns.

A propriedade flex-shrink

A propriedade flex-shrink é definida para permitir que um item flex encolha. Especifica o espaço que o item deve ocupar no contentor quando o espaço negativo é distribuído.

A propriedade aceita um valor sem unidade.

Informação

Nota: o valor não pode ser um número negativo.

Por predefinição, todos os itens flex podem ser encolhidos, mas se definirmos o valor como 0 (não encolher), eles mantêm o tamanho original.

Exemplo da propriedade flex-shrink:

Exemplo da propriedade flex-shrink

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
      }
      .flex-container div {
        width: 120px;
        padding: 30px 10px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
      }
      .flex-container div.two {
        flex-shrink: 0;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div class="two">
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
      <div>
        <span>6</span>
      </div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Dica

Recomendamos a utilização da propriedade abreviada flex em vez de flex-shrink para controlar a flexibilidade, pois repõe corretamente quaisquer componentes não especificados, adequando-se às utilizações mais comuns.

A propriedade flex-basis

A propriedade flex-basis define o tamanho inicial de um item flex, antes de o espaço restante ser distribuído de acordo com os fatores flex. A propriedade é especificada pela palavra-chave content ou por width.

Os valores de flex-basis são os seguintes:

auto (predefinição) - o comprimento é igual ao comprimento do item flexível.
width - um comprimento absoluto, ou uma percentagem da propriedade main size do contentor flex pai, ou a palavra-chave auto. Valores negativos são inválidos.
content - determina o dimensionamento automático com base no conteúdo do item flex.
initial - define esta propriedade com o seu valor predefinido.

Informação

Nota: a propriedade content ainda não é bem suportada, pelo que não é fácil compreender o que fazem os seus "parentes" max-content, min-content e fit-content.

Exemplo da propriedade flex-basis:

Propriedade flex-basis, exemplo de código

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        background-color: #8ebf42;
      }
      .flex-container div {
        padding: 30px 10px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
        background-color: #fff;
      }
      .flex-container div.four {
        flex-basis: 25%;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div>
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div class="four">
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

A propriedade flex

A propriedade flex é a forma abreviada de flex-grow, flex-shrink e flex-basis em conjunto. flex-shrink e flex-basis são opcionais.

Entre outros valores, esta propriedade pode aceitar auto (1 1 auto) ou none (0 0 auto).

Dica

Recomendamos vivamente a utilização da propriedade abreviada flex em vez das propriedades individuais.

Exemplo da propriedade flex:

flex em vez de flex-shrink, exemplo de código

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        height: 150px;
        padding: 10px;
        margin-bottom: 20px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 15%;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .second > div {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="flex-container second">
      <div></div>
      <div></div>
      <div></div>
    </div> 
  </body>
</html>

Experimente Você Mesmo »

Informação

Nota: as propriedades CSS float, clear e vertical-align não têm qualquer efeito sobre os itens flex.

Exemplos de Flexbox

Vejamos alguns exemplos de flexbox em CSS e que tipo de layouts pode utilizar nos seus próprios projetos web.

Centrar elementos vertical e horizontalmente

Centrar elementos por todos os meios disponíveis em CSS foi sempre um problema. Com o aparecimento do Flexbox, este problema resolve-se facilmente. Com as propriedades align-items, align-self e justify-content, pode alinhar elementos tanto na vertical como na horizontal.

Exemplo das propriedades align-items, align-self e justify-content para centrar elementos vertical e horizontalmente:

Centrar elementos vertical e horizontalmente com Flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 70px;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #1faadb;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Barra de navegação responsiva com pesquisa

Com o Flexbox, pode criar uma barra de navegação com os itens de menu alinhados à esquerda e a barra de pesquisa alinhada à direita (ou vice-versa). A barra de navegação é responsiva: expande-se ou contrai-se consoante o tamanho do ecrã.

Exemplo da barra de navegação responsiva:

Exemplo de navbar com flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .main-nav {
        display: flex;
        padding: 15px;
        border-radius: 5px;
        background: #1c87c9;
        color: #fff;
        font-weight: 500;
      }
      .main-nav > ul {
        display: flex;
        flex: 2;
        padding: 0;
        margin: 0;
        list-style-type: none;
      }
      .main-nav li {
        margin-right: 20px;
      }
      .main-nav > form {
        display: flex;
        justify-content: flex-end;
        flex: 1;
      }
      .main-nav input {
        flex: 1;
        padding: 5px;
      }
      .main-nav button {
        padding: 0 20px;
        margin-left: 10px;
        border: 0;
        border-radius: 20px;
        background: #fff;
        color: #666;
      }
      @media screen and (max-width: 575px) {
        .main-nav {
          flex-direction: column;
        }
        .main-nav ul {
          margin-bottom: 10px;
        }
      }
    </style>
  </head>
  <body>
    <nav class="main-nav">
      <ul>
        <li>Home</li>
        <li>About us</li>
        <li>Services</li>
        <li>Contact us</li>
      </ul>
      <form>
        <input type="search" placeholder="Search" />
        <button type="button">Go</button>
      </form>
    </nav>
  </body>
</html>

O layout Holy Grail

O padrão de layout Holy Grail é muito popular na web. Inclui cabeçalho, rodapé, a área de conteúdo principal com navegação de largura fixa à esquerda, conteúdo ao centro e uma barra lateral de largura fixa à direita.

Exemplo do layout Holy Grail:

Exemplo de layout Holy Grail com flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
        font-size: 18px;
      }
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
      }
      .main {
        display: flex;
        flex: 1;
      }
      .main > article {
        flex: 1;
      }
      .main > nav,
      .main > aside {
        flex: 0 0 20vw;
        background: #d5dce8;
      }
      .main > nav {
        order: -1;
      }
      header,
      footer {
        background: #1c87c9;
        height: 15vh;
      }
      header,
      footer,
      article,
      nav,
      aside {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <header>Header</header>
    <div class="main">
      <article>Article</article>
      <nav>Nav</nav>
      <aside>Aside</aside>
    </div>
    <footer>Footer</footer>
  </body>
</html>

Prática

Which of the following are properties of Flexbox in CSS?