Guia completo de Flexbox
Flex Container
É o elemento que possui a propriedade display: flex/inline-flex; assim tornando todos seus filhos diretos flex items
Display
Define o elemento como um container flex (inline ou block dependendo do valor passado) e estabelece um contexto de formatação flex para todos seus filhos diretos, ou seja, agora todos os filhos serão flex items.
display: flex;
Gera um flex container como elemento de bloco (ocupa todo o espaço da linha)
display: inline-flex;
Gera um flex container como elemento de linha (permite outros elementos na mesma linha)
Flex Direction
Define o sentido do eixo principal, que é a direção em que os flex items serão inseridos no flex container
flex-direction: row; (padrão)
O eixo principal é definido como a linha (horizontal), logo os flex items são distribuidos de acordo e na ordem de leitura (esquerda para direita).
flex-direction: row-reverse;
O eixo principal é definido como a linha (horizontal), porém com o sentido de distribuição invertido (direita para esquerda)
flex-direction: column;
O eixo principal é definido como coluna (vertical), logo os flex items são distribuidos de acordo e na ordem padrão (cima para baixo).
flex-direction: column-reverse;
O eixo principal é definido como coluna (vertical), porém com o sentido de distribuição invertido (baixo para cima)
Flex Wrap
Define se ocorrerá ou não quebra de linha
flex-wrap: nowrap; (padrão)
Por padrão o flex container distribui os flex items tentando acomodar (reduzindo seu tamanho na médida no possível) todos em uma só linha, não sendo permitida a quebra de linha
Observação: Os flex items tem seu tamanho reduzido para se acomodarem em uma só linha, essa redução é limitada pelo menor tamanho do seu conteúdo ou por propriedades como por exemplo min-width aplicadas no flex item.
flex-wrap: wrap;
O flex container irá distribuir os Flex Items para ocuparem o espaço necessário e se não for possível se acomodar em uma só linha, ocorrerá a quebra de linha.
flex-wrap: wrap-reverse;
O flex container irá distribuir os Flex Items para ocuparem o espaço necessário e se não for possível se acomodar em uma só linha, ocorrerá a quebra de linha de forma invertida, ou seja, os itens irão para cima dos anteriores.
Flex Flow
É um atalho para flex-direction e flex-wrap.
flex-flow: <flex-direction> <flex-wrap>Ex:
flex-flow: column wrap;
Justify Content
Alinha os flex items de acordo ao eixo principal
justify-content: flex-start; (padrão)
Os flex items são alinhados de acordo o começo do flex-direction (eixo principal)
justify-content: flex-end;
Os flex items são alinhados de acordo o fim do flex-direction (eixo principal)
justify-content: center;
Os flex items são alinhados de acordo ao centro do eixo principal
justify-content: space-between;
Os flex items são distribuidos com o espaço máximo entre eles, um espaço igual X entre todos em seu eixo principal
Observação: Caso só tenha dois flex items, eles serão dispostos um em cada extremidade, pois é a distância máxima possível
justify-content: space-around;
Os flex items são distribuidos com o espaço máximo ao lado deles, um espaço igual X em cada lado de cada flex item ao longo do eixo principal
justify-content: space-evenly;
Os flex items são distribuídos de forma que o espaçamento entre quaisquer dois itens (e o espaço para as bordas) seja igual.
Align Items
É responsável pelo alinhamento dos itens flex dentro da linha flex de acordo ao eixo cruzado.
Na prática, o align-items insere em todos os items flex a propriedade align-self respectiva
(Ex.: usar align-items: flex-start; aplica align-self: flex-start; a todos os elementos da linha)
align-items: stretch; (padrão)
Os flex items são esticados para preencher totalmente a linha flex no eixo cruzado, mas ainda respeita o min-width/max-width
align-items: flex-start;
Os flex items são alinhados ao começo do eixo cruzado na linha flex, respeitando as definições do flex-direction
align-items: flex-end;
Os flex items são alinhados ao fim do eixo cruzado na linha flex, respeitando as definições do flex-direction
align-items: center;
Os flex items são alinhados ao centro da linha flex do eixo cruzado
align-items: baseline;
Os flex items são alinhados de acordo a linha base dentro da linha flex no eixo cruzado
Observação:
Quando existe mais de uma linha flex, graças ao flex-wrap: wrap; os flex items são alinhados de acordo a sua linha flex
Nesse exemplo os flex items possuem align-items: flex-start: e se alinham ao começo de sua linha flex
Align Content
É responsável pelo alinhamento das linhas flex em relação ao flex container de acordo ao eixo cruzado
align-content: normal; (padrão)
Atua como se nenhum comportamento tivesse sido definido, fazendo as linhas flex ocuparem todo o flex-container
align-content: flex-start;
Alinha as linhas flex ao começo do container de acordo ao eixo cruzado e respeitando o flex-direction
align-content: flex-end;
Alinha as linhas flex ao fim do container de acordo ao eixo cruzado e respeitando o flex-direction
align-content: center;
Alinha as linhas flex ao centro do container de acordo ao eixo cruzado e respeitando o flex-direction
align-content: space-between;
Alinha as linhas flex com a distância máxima entre elas (x) de acordo ao eixo cruzado
align-content: space-around;
Alinha as linhas flex com uma distância igual em cada lado (x) de acordo ao eixo cruzado
align-content: space-evenly;
Alinha as linhas flex com uma distância igual entre elas (x) de acordo ao eixo cruzado
align-content: stretch;
Estica as linhas flex para preencher todo o flex container
Flex Item
São todos os elementos que possuem um pai com a propriedade display: flex/inline-flex;
Order
Por padrão, os flex items são dispostos na ordem de origem do HTML. No entanto, a propriedade order controla a ordem em que aparecem no flex container.
order: 0; (padrão)
Por padrão todos os flex items tem order: 0, ou seja, seguem a ordem de origem no código
order: <número>;
A ordem de aparição no flex container respeita o order
Flex-grow
Controla o crescimento do flex-item (além do conteúdo) para ocupar o espaço restante do flex container.
flex-grow: 0 (padrão)
Itens flex não crescem para ocupar o espaço restante do flex container. Sendo o limitador do menor tamanho flex de um flex-item o seu tamanho/conteúdo ou um flex-basis definido.
flex-grow: <número> (ex: 1, 2, 3…)
O item flex cresce (além de seu conteúdo) para ocupar o espaço restante do flex container, números maiores que 1 são usados para distribuir o crescimento proporcionalmente entre os itens flex. Por exemplo, um item flex com flex-grow: 2; cresce o dobro do que um com flex-grow: 1;
Flex-shrink
Controla a redução do flex-item quando necessária para exibir todos os itens flex sem estourar o flex container
flex-shrink: 1; (padrão)
O item flex se reduz para encaixar no flex container.
flex-shrink: 0
Flex item não reduzirá seu tamanho, sendo o tamanho mínimo o flex-basis (quando definido) ou o tamanho do item (width definido ou conteúdo)
flex-shrink: número > 1 (ex.: 2, 3, 4…)
São usados para distribuir a quantidade de redução proporcionalmente entre os itens flex. Por exemplo, um item flex com flex-shrink: 10; reduz quando necessário 10 vezes mais do que um com flex-shrink: 1;
Flex-basis
Controla o tamanho base (inicial) de um item flex, sobrescreve o tamanho do item (definido por width, padding, etc.)
flex-basis: auto; (padrão)
O tamanho base do flex item é automático, logo será igual ao do item. Se o item não tiver tamanho especificado (definido pelo width, padding, etc.), o tamanho será conforme seu conteúdo.
flex-basis: número em px, %, em, etc. (ex.: 150px, 50%, etc.)
Define um tamanho base específico, mas flexível, para o flex item. Pode ser entendido como o tamanho mínimo aceitável do flex item.
Observação: Se precisar diminuir (com flex-shrinks: 1;), o valor do flex-basis não será o limitador do menor tamanho e sim o tamanho (width etc) ou o conteúdo do flex item
flex-basis: 0;
Define como tamanho base do item flex o menor valor possível conforme o tamanho do item (ex: width definido) ou seu conteúdo
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Flex Basis + Flex Grow
Flex items com conteúdos diferentes, mas com tamanhos iguais usando Flex Basis + Flex Grow
flex-basis: 0; + flex-grow: 1;
Quando essas duas propriedades são passadas juntas ocorre um fenômeno interessante e bastante útil.
Primeiro o flex-basis: 0; define que o tamanho base do item flex seja 0, ou seja, o menor possível, ignorando/sobrescrevendo o tamanho do conteúdo do item.
Depois o flex-grow: 1; expande em igual proporção os dois itens (já que os dois possuem o mesmo valor de flex-grow)
Resultando assim em algo interessante que são dois ou mais flex items com conteúdos diferentes, mas que possuem o mesmo tamanho flex
Isso só ocorreu graças ao flex-basis: 0; ter ignorado o tamanho do conteúdo (definindo ele como 0), assim o flex-grow adicionou o espaço extra depois de forma igual nos dois items flex, como o conteúdo dos dois era tamanho 0, o tamanho final dos items flex foi igual, assim como o acréscimo do flex-grow
Veja o que aconteceria caso não fosse usado flex-basis: 0; e o tamanho do conteúdo não fosse ignorado:
É possível ver que o flex-grow deu aos dois acréscimos iguais, porém o tamanho final dos items flex difere e isso ocorreu devido à diferença de tamanho de seus conteúdos
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Flex
É a forma resumida das três propriedades anteriores: flex-grow, flex-shrink e flex-basis
flex: <flex-grow>, <flex-shrink>, <flex-basis>;Sendo por padrão (caso nenhuma das três propriedades sejam definidas):
flex: 0, 1, auto;Align Self
Essa propriedade permite que o alinhamento de eixo cruzado padrão (aquele especificado pelo align-items no flex container) seja substituído e passado individualmente ao flex item.
align-self: stretch; (padrão, quando o align-items não for definido)
O flex item é esticados para preencher totalmente a linha flex no eixo cruzado, mas ainda respeita o min-width/max-width
align-self: flex-start;
O flex item é alinhado ao começo do eixo cruzado na linha flex, respeitando as definições do flex-direction
align-self: flex-end;
O flex item é alinhado ao fim do eixo cruzado na linha flex, respeitando as definições do flex-direction
align-self: center;
O flex item é alinhado ao centro da linha flex do eixo cruzado
Então é isso…
Se sentir necessidade de aprofundar em alguns dos pontos mais complexos do Flexbox sinta-se a vontade para ler os outros guias:
Flex Grow, Flex Basis, Flex Shrink e Flex
https://lucasbatiiista.medium.com/flex-grow-flex-basis-flex-shrink-e-flex-4f208d65dd38
Align Items vs Align Content
https://lucasbatiiista.medium.com/align-items-vs-align-content-fceb99dea277
Agora é só praticar
Você pode experimentar todas essas propriedades no CodePen usado para escrever esse texto:
https://codepen.io/lucasbatiiista/pen/QWpXJLe
