Flexbox - Guia rápido

Cascensão Style Sheets (CSS) é uma linguagem de design simples destinada a simplificar o processo de tornar as páginas da web apresentáveis. CSS trata da aparência e comportamento de uma página da web.

Usando CSS, você pode controlar a cor do texto, o estilo das fontes, o espaçamento entre os parágrafos, como as colunas são dimensionadas e dispostas, quais imagens ou cores de fundo são usadas, designs de layout, variações na exibição para diferentes dispositivos e tamanhos de tela bem como uma variedade de outros efeitos.

Para determinar a posição e as dimensões das caixas, em CSS, você pode usar um dos modos de layout disponíveis -

The block layout - Este modo é usado no layout de documentos.
The inline layout - Este modo é usado no layout de texto.
The table layout - Este modo é usado no layout de tabelas.
The table layout - Este modo é usado para posicionar os elementos.

Todos esses modos são usados para alinhar elementos específicos como documentos, texto, tabelas, etc., no entanto, nenhum deles fornece uma solução completa para criar sites complexos. Inicialmente, isso é feito usando uma combinação de elementos flutuantes, elementos posicionados e layout de tabela (frequentemente). Mas os flutuadores só permitem posicionar horizontalmente as caixas.

O que é Flexbox?

Além dos modos mencionados acima, CSS3 fornece outro modo de layout Caixa Flexível, comumente chamado de Flexbox.

Usando este modo, você pode criar facilmente layouts para aplicativos complexos e páginas da web. Ao contrário dos flutuadores, o layout Flexbox oferece controle completo sobre a direção, alinhamento, ordem e tamanho das caixas.

Recursos do Flexbox

A seguir estão os recursos notáveis do layout Flexbox -

Direction - Você pode organizar os itens em uma página da web em qualquer direção, como da esquerda para a direita, da direita para a esquerda, de cima para baixo e de baixo para cima.
Order - Usando o Flexbox, você pode reorganizar a ordem do conteúdo de uma página da web.
Wrap - No caso de espaço inconsistente para o conteúdo de uma página da web (em uma linha), você pode agrupá-los em várias linhas (horizontalmente) e verticalmente.
Alignment - Usando o Flexbox, você pode alinhar o conteúdo da página da web em relação ao seu contêiner.
Resize - Usando o Flexbox, você pode aumentar ou diminuir o tamanho dos itens na página para caber no espaço disponível.

Navegadores de suporte

A seguir estão os navegadores que suportam Flexbox.

Chrome 29+
Firefox 28+
Internet Explorer 11+
Opera 17+
Safari 6.1+
Android 4.4+
iOS 7.1+

Para usar o Flexbox em seu aplicativo, você precisa criar / definir um flex container usando o display propriedade.

Usage -

display: flex | inline-flex

Esta propriedade aceita dois valores

flex - Gera um contêiner flexível de nível de bloco.
inline-flex - Gera uma caixa de contêiner flexível em linha.

Agora, veremos como usar o display propriedade com exemplos.

Flex

Ao passar este valor para a propriedade display, um flex container em nível de bloco será criado. Ele ocupa toda a largura do contêiner pai (navegador).

O exemplo a seguir demonstra como criar um flex container em nível de bloco. Aqui, estamos criando seis caixas com cores diferentes e usamos o flex container para segurá-las.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:flex;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Uma vez que demos o valor flex ao display propriedade, o contêiner usa a largura do contêiner (navegador).

Você pode observar isso adicionando uma borda ao contêiner, conforme mostrado abaixo.

.container {
   display:inline-flex;
   border:3px solid black;
}

Isso produzirá o seguinte resultado -

Flex inline

Ao passar este valor para o display, um flex container de nível embutido será criado. Ele apenas ocupa o lugar necessário para o conteúdo.

O exemplo a seguir demonstra como criar um flex container embutido. Aqui, estamos criando seis caixas com cores diferentes e usamos o contêiner inline-flex para segurá-las.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Como usamos um flex container embutido, ele apenas ocupou o espaço necessário para envolver seus elementos.

o flex-direction propriedade é usada para especificar a direção na qual os elementos do flex container (flex-items) devem ser colocados.

usage -

flex-direction: row | row-reverse | column | column-reverse

Esta propriedade aceita quatro valores -

row - Organiza os elementos do contêiner horizontalmente da esquerda para a direita.
row-reverse - Organiza os elementos do contêiner horizontalmente da direita para a esquerda.
column - Organiza os elementos do container verticalmente da esquerda para a direita.
column-reverse - Organiza os elementos do contêiner verticalmente da direita para a esquerda.

Agora, vamos dar alguns exemplos para demonstrar o uso do direction propriedade.

linha

Ao passar este valor para o direction propriedade, os elementos do contêiner são organizados horizontalmente da esquerda para a direita, conforme mostrado abaixo.

O exemplo a seguir demonstra o resultado da passagem do valor rowà propriedade flex-direction . Aqui, estamos criando seis caixas com cores diferentes com o valor flex-directionrow.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

linha reversa

Ao passar este valor para o direction propriedade, os elementos do contêiner são organizados horizontalmente da direita para a esquerda, conforme mostrado abaixo.

O exemplo a seguir demonstra o resultado da passagem do valor row-reverseà propriedade flex-direction . Aqui, estamos criando seis caixas com cores diferentes com o valor flex-directionrow-reverse.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row-reverse;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

coluna

Ao passar este valor para o direction propriedade, os elementos do contêiner são dispostos verticalmente de cima para baixo, conforme mostrado abaixo.

O exemplo a seguir demonstra o resultado da passagem do valor columnà propriedade flex-direction . Aqui, estamos criando seis caixas com cores diferentes com o valor flex-directioncolumn.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:column;
      }
   </style>
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

coluna reversa

Ao passar este valor para o direction propriedade, os elementos do contêiner são dispostos verticalmente de baixo para cima, conforme mostrado abaixo.

O exemplo a seguir demonstra o resultado da passagem do valor column-reverseà propriedade flex-direction . Aqui, estamos criando seis caixas com cores diferentes com o valor flex-directioncolumn-reverse.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:column-reverse;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Geralmente, em caso de espaço insuficiente para o contêiner, o resto dos itens flexíveis serão ocultados conforme mostrado abaixo.

o flex-wrap propriedade é usada para especificar os controles se o flex-container é de linha única ou multilinha.

usage -

flex-wrap: nowrap | wrap | wrap-reverse
flex-direction: column | column-reverse

Esta propriedade aceita os seguintes valores -

wrap - Em caso de espaço insuficiente para eles, os elementos do recipiente (flexitems) serão enrolados em linhas flexíveis adicionais de cima para baixo.
wrap-reverse - Em caso de espaço insuficiente para eles, os elementos do contêiner (itens flex) serão enrolados em linhas flexíveis adicionais de baixo para cima.

Agora, veremos como usar o wrap propriedade, com exemplos.

embrulho

Ao passar o valor wrap para a propriedade flex-wrap, os elementos do contêiner são organizados horizontalmente da esquerda para a direita, conforme mostrado abaixo.

O exemplo a seguir demonstra o resultado da passagem do valor wrappara a propriedade flex-wrap . Aqui, estamos criando seis caixas com cores diferentes com o valor flex-directionrow.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

envoltório reverso

Ao passar o valor wrap-reverse para a propriedade flex-wrap, os elementos do contêiner são organizados horizontalmente da esquerda para a direita, conforme mostrado abaixo.

O exemplo a seguir demonstra o resultado da passagem do valor wrap-reversepara a propriedade flex-wrap . Aqui, estamos criando seis caixas com cores diferentes com o valor flex-directionrow.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap-reverse;
      }
   </style>
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

wrap (coluna)

Ao passar o valor wrap para a propriedade flex-wrap e o valor column para a propriedade flex-direction, os elementos do contêiner são organizados horizontalmente da esquerda para a direita, conforme mostrado abaixo.

O exemplo a seguir demonstra o resultado da passagem do valor wrap ao flex-wrappropriedade. Aqui, estamos criando seis caixas com cores diferentes com o valor flex-directioncolumn.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:column;
         flex-wrap:wrap;
         height:100vh;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

wrap-reverse (coluna)

Ao passar o valor wrap-reverse para a propriedade flex-wrap e o valor column para a propriedade flex-direction, os elementos do contêiner são organizados horizontalmente da esquerda para a direita, conforme mostrado abaixo.

O exemplo a seguir demonstra o resultado da passagem do valor wrap-reversepara a propriedade flex-wrap . Aqui, estamos criando seis caixas com cores diferentes e com o valor flex-directioncolumn.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:column;
         flex-wrap:wrap-reverse;
         height:100vh;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Freqüentemente, você pode observar um espaço extra deixado no contêiner após organizar os itens flexíveis conforme mostrado abaixo.

Usando a propriedade justify-content, você pode alinhar o conteúdo ao longo do eixo principal, distribuindo o espaço extra conforme pretendido. Você também pode ajustar o alinhamento dos flexitems, caso eles ultrapassem a linha.

usage -

justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;

Esta propriedade aceita os seguintes valores -

flex-start - Os flex-items são colocados no início do container.
flex-end - Os flex-items são colocados no final do container.
center - Os flex items são colocados no centro do container, onde o espaço extra é igualmente distribuído no início e no final dos flex items.
space-between - O espaço extra é igualmente distribuído entre os flex-items.
space-around - O espaço extra é igualmente distribuído entre os flex items, de forma que o espaço entre as bordas do contêiner e seu conteúdo seja a metade do espaço entre os flex items.

Agora, veremos como usar a propriedade justify-content, com exemplos.

flex-start

Ao passar este valor para o imóvel justify-content, os flex-items são colocados no início do contêiner.

O exemplo a seguir demonstra o resultado da passagem do valor flex-start ao justify-content propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

extremidade flexível

Ao passar este valor para o imóvel justify-content, os flex-items são colocados no final do contêiner.

O exemplo a seguir demonstra o resultado da passagem do valor flex-end ao justify-content propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:flex-end;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Centro

Ao passar este valor para o imóvel justify-content, os flex items são colocados no centro do contêiner, onde o espaço extra é igualmente distribuído no início e no final dos flex items.

O exemplo a seguir demonstra o resultado da passagem do valor center ao justify-content propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:center;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

espaço entre

Ao passar este valor para o imóvel justify-content, o espaço extra é igualmente distribuído entre os itens flexíveis de forma que o espaço entre quaisquer dois itens flexíveis seja o mesmo e o início e o final dos itens flexíveis toquem as bordas do contêiner.

O exemplo a seguir demonstra o resultado da passagem do valor space-between ao justify-content propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-between;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

espaço ao redor

Ao passar este valor para o imóvel justify-content, o espaço extra é igualmente distribuído entre os flex-items de forma que o espaço entre quaisquer dois flex-items seja o mesmo. No entanto, o espaço entre as bordas do contêiner e seu conteúdo (o início e o fim dos flex items) é a metade do espaço entre os flex items.

O exemplo a seguir demonstra o resultado da passagem do valor space-around ao justify-content propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-around;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

espaço-uniformemente

O exemplo a seguir demonstra o resultado da passagem do valor space-evenly ao justify-content propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-evenly;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

o align-items propriedade é a mesma que justify content. Mas aqui, os itens foram alinhados ao longo do acesso cruzado (verticalmente).

Usage -

align-items: flex-start | flex-end | center | baseline | stretch;

Esta propriedade aceita os seguintes valores -

flex-start - Os itens flexíveis foram alinhados verticalmente na parte superior do contêiner.
flex-end - Os itens flexíveis foram alinhados verticalmente na parte inferior do recipiente.
flex-center - Os itens flex foram alinhados verticalmente no centro do contêiner.
stretch - Os flex items foram alinhados verticalmente de forma que ocupassem todo o espaço vertical do container.
baseline - Os itens flexíveis foram alinhados de forma que a linha de base de seu texto fosse alinhada ao longo de uma linha horizontal.

flex-start

Ao passar este valor para a propriedade align-items, os flex items foram alinhados verticalmente no topo do container.

O exemplo a seguir demonstra o resultado da passagem do valor flex-start ao align-items propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

extremidade flexível

Ao passar este valor para o imóvel align-items, os itens flexíveis são alinhados verticalmente na parte inferior do contêiner.

O exemplo a seguir demonstra o resultado da passagem do valor flex-end ao align-items propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:flex-end;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Centro

Ao passar este valor para o imóvel align-items, os itens flexíveis são alinhados verticalmente no centro do contêiner.

O exemplo a seguir demonstra o resultado da passagem do valor flex-center ao align-items propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:center;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

esticam

Ao passar este valor para o imóvel align-items, os itens flexíveis são alinhados verticalmente de modo que preencham todo o espaço vertical do contêiner.

O exemplo a seguir demonstra o resultado da passagem do valor stretch ao align-items propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:stretch;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

linha de base

Ao passar este valor para o imóvel align-items, os flex-items são alinhados de forma que a linha de base de seu texto seja alinhada ao longo de uma linha horizontal.

O exemplo a seguir demonstra o resultado da passagem do valor baseline ao align-items propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:baseline;
      }
   </style>
   
   <body>
      <div class = "container">
      <div class = "box box1">One</div>
      <div class = "box box2">two</div>
      <div class = "box box3">three</div>
      <div class = "box box4">four</div>
      <div class = "box box5">five</div>
      <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

No caso do flex-container ter várias linhas (when, flex-wrap: wrap), a propriedade align-content define o alinhamento de cada linha dentro do container.

Usage -

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Esta propriedade aceita os seguintes valores -

stretch - As linhas no conteúdo serão esticadas para preencher o espaço restante.
flex-start - Todas as linhas do conteúdo são compactadas no início do contêiner.
flex-end - Todas as linhas do conteúdo são embaladas no final do contêiner.
center - Todas as linhas do conteúdo são embaladas no centro do contêiner.
space-between - O espaço extra é distribuído uniformemente entre as linhas.
space-around - O espaço extra é distribuído entre as linhas de maneira uniforme, com espaço igual em cada linha (incluindo a primeira e a última linhas)

Centro

Ao passar este valor para o imóvel align-content, todas as linhas são embaladas no centro do contêiner.

O exemplo a seguir demonstra o resultado da passagem do valor center ao align-content propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:43%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:center;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

flex-start

Ao passar este valor para o imóvel align-content, todas as linhas são embaladas no início do contêiner.

O exemplo a seguir demonstra o resultado da passagem do valor flex-start ao align-content propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

extremidade flexível

Ao passar este valor para o imóvel align-content, todas as linhas são embaladas no final do contêiner.

O exemplo a seguir demonstra o resultado da passagem do valor flex-end ao align-content propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:flex-end;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

esticam

Ao passar este valor para o imóvel align-content, as linhas se esticarão para preencher o espaço restante.

O exemplo a seguir demonstra o resultado da passagem do valor stretch ao align-content propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:stretch;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

espaço ao redor

Ao passar este valor para o imóvel align-content, o espaço extra é distribuído entre as linhas uniformemente com espaço igual ao redor de cada linha (incluindo a primeira e a última linhas).

O exemplo a seguir demonstra o resultado da passagem do valor space-around ao align-content propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:space-around;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

espaço entre

Ao passar este valor para o imóvel align-content, o espaço extra é distribuído uniformemente entre as linhas, onde a primeira linha ficará no topo e a última linha ficará na parte inferior do contêiner.

O exemplo a seguir demonstra o resultado da passagem do valor space-between ao align-content propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:space-between;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

o flex-order propriedade é usada para definir a ordem do item flexbox.

O exemplo a seguir demonstra o orderpropriedade. Aqui estamos criando seis caixas coloridas com os rótulos um, dois, três, quatro, cinco, seis, organizados na mesma ordem, e os estamos reordenando na ordem um, dois, cinco, seis, três, quatro, usando o propriedade flex-order.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:35px;
         padding:15px;
      }
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red; order:1}
      .box4{background:magenta; order:2}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:rows;
         flex-wrap:wrap;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

- ve pedidos

Você também pode atribuir valores –ve ao pedido, conforme mostrado abaixo.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:35px;
         padding:15px;
      }
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red; order:-1}
      .box4{background:magenta; order:-2}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

base flexível

Nós usamos o flex-basis propriedade para definir o tamanho padrão do flex-item antes que o espaço seja distribuído.

O exemplo a seguir demonstra o uso da propriedade flex-basis. Aqui estamos criando 3 caixas coloridas e fixando seu tamanho para 150 px.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-basis:150px; }
      .box2{background:blue; flex-basis:150px;}
      .box3{background:red; flex-basis:150px;}
      
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

flex-grow

Nós usamos o flex-grow propriedade para definir o flex-growfator. Em caso de excesso de espaço no contêiner, ele especifica quanto um determinado item flexível deve crescer.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-grow:10; flex-basis:100px; }
      .box2{background:blue; flex-grow:1; flex-basis:100px; }
      .box3{background:red; flex-grow:1; flex-basis:100px; }
      
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

flex-encolher

Usamos a propriedade flex-shrink é usada para definir o flex shrink-factor. Caso não haja espaço suficiente no contêiner, especifica quanto um flex-item deve encolher.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-basis:200px; flex-shrink:10}
      .box2{background:blue; flex-basis:200px; flex-shrink:1}
      .box3{background:red; flex-basis:200px; flex-shrink:1}
      
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

flex

Existe um atalho para definir valores para todas essas três propriedades de uma vez; é chamadoflex. Usando esta propriedade, você pode definir valores para flex-grow, flex-shrink e flex-basis valores de uma vez. Aqui está a sintaxe dessa propriedade.

.item {
   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Esta propriedade é semelhante a align-items, mas aqui, ele é aplicado a itens flexíveis individuais.

Usage -

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Esta propriedade aceita os seguintes valores -

flex-start - O item flexível será alinhado verticalmente na parte superior do contêiner.
flex-end - O item flexível será alinhado verticalmente na parte inferior do recipiente.
flex-center - O item flexível será alinhado verticalmente no centro do contêiner.
Stretch - O item flexível será alinhado verticalmente de forma que preencha todo o espaço vertical do contêiner.
baseline - O item flexível será alinhado na linha de base do eixo transversal.

flex-start

Ao passar este valor para a propriedade align-self, um determinado flex-item será alinhado verticalmente no topo do contêiner.

O exemplo a seguir demonstra o resultado da passagem do valor flex-start ao align-self propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:start;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

extremidade flexível

Ao passar este valor para o imóvel align-self, um determinado item flexível será alinhado verticalmente na parte inferior do contêiner.

O exemplo a seguir demonstra o resultado da passagem do valor flex-end ao align-self propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:flex-end;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Centro

Ao passar o valor center para a propriedade align-self, um determinado item flexível será alinhado verticalmente no centro do contêiner.

O exemplo a seguir demonstra o resultado da passagem do valor center ao align-self propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:center;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

esticam

Ao passar este valor para o imóvel align-self, um item flexível específico será alinhado verticalmente de modo que preencha todo o espaço vertical do recipiente.

O exemplo a seguir demonstra o resultado de passar a extensão de valor para o align-self propriedade.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:stretch;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

↰ Previous page