DEV Community

Cover image for 🙅🏾‍♂️ Flexbox Sem Frescura
Mr Punk da Silva
Mr Punk da Silva

Posted on • Edited on

🙅🏾‍♂️ Flexbox Sem Frescura

#webdev #programming #braziliandevs #learning

Table of Contents

Introdução ao CSS Flexbox

O que é Flexbox?

  • O CSS Flexible Box Layout Model (Modelo de Layout de Caixa Flexível do CSS) é um modelo de layout que oferece uma maneira eficiente de:
    • Dispor, alinhar e distribuir espaços entre os itens de um contêiner.

Quais são os benefícios?

  • Permite o alinhamento das caixas para criar layouts em duas dimensões.
  • A ordem de exibição dos elementos é independente da ordem no código-fonte.

Modelos de Layouts

  • Layout em tabelas.
  • Layout em blocos.
  • Layout em linhas.
  • Layout posicionado.

Vantagens do Flexbox

  • O layout flex oferece diversas vantagens, como:
    • Posicionamento preciso dos elementos.
    • Capacidade de alongamento e redimensionamento.
    • Ajuste do tamanho dos elementos conforme necessário.
    • Maior flexibilidade no design.
    • Controle sobre o espaçamento, escolha e ordenação dos itens.

Terminologia

Flex Container

  • Flexbox é um modelo de layout que funciona através de um conjunto de propriedades específicas.
  • O primeiro elemento necessário é o Flex Container. Para se tornar flexível, o contêiner recebe a propriedade display com o valor flex ou inline-flex.

Flex Items

  • Outro elemento essencial são os Flex Items, que são os itens (filhos diretos) de um Flex Container.

Flex Lines

  • Os elementos filhos do Flex Container são dispostos e alinhados em linhas flexíveis (Flex Lines).
  • Um Flex Container pode conter uma única linha ou múltiplas linhas.

Direções e Dimensionamento

  • As direções e termos de dimensionamento aplicam-se ao contêiner flexível, permitindo controle detalhado sobre como os elementos são dispostos e redimensionados.

Tipos de displays flex: display: flex; e display: inline-flex;

Introdução

  • Usar display: flex; ou display: inline-flex; transforma o elemento em uma caixa flexível, sendo essa a primeira propriedade necessária para utilizar o Flexbox.
  • Ao aplicar essa propriedade, o elemento se torna um Flex Container, e seus filhos diretos passam a ser Flex Items.
  • Os Flex Items têm a propriedade de se esticar (ou se alongar) para ocupar todo o espaço disponível dentro do Flex Container. Por conta disso, eles perdem o tamanho ou largura definidos anteriormente, exigindo atenção ao comportamento do layout.

Diferença entre display: flex; e display: inline-flex;

  • display: flex;:

    • Transforma o Flex Container em um elemento de bloco.
    • Os Flex Items são dispostos em uma única Flex Line (linha flexível).

  • display: inline-flex;:

    • Transforma o Flex Container em um elemento inline.
    • Permite que múltiplos contêineres com inline-flex sejam dispostos lado a lado, diferentemente do comportamento de display: flex;.

Uso

  • Código: 
/*Modulo 1/3 display-flex inline-flex/3-display-flex-inline-flex.html*/ .wrraper{ padding: 1%; margin-top: 1em; } .container-flex, .container-inline-flex{ background-color: #85d0bc; border: 1px solid #028082; width: 30%; padding: 1%; margin: 0 auto; color: #028082; } .container-flex{ display: flex; } .container-inline-flex{ display: inline-flex; background-color: #d0b285; border: 1px solid #822b02; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

🔗 Resource: https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/3%20display-flex%20inline-flex/3-display-flex-inline-flex.html

Flex Direction

O Flex Direction é uma propriedade do CSS que define a direção do eixo principal de um container flexível. Existem duas direções principais, e para cada uma delas, há um comportamento específico dos itens dentro do container. Quando o eixo principal é alterado, há também uma alteração nas propriedades dos itens flexíveis.

Propriedades de Direção:

  • flex-direction: row;

    • Ao usar flex-direction: row;, o eixo principal dos itens flexíveis é definido na horizontal. Os itens se ajustam automaticamente para preencher a largura total do container, podendo diminuir ou se alongar conforme necessário.
    • Nota: flex-direction: row é o valor padrão.

  • flex-direction: column;

    • Ao utilizar flex-direction: column;, o eixo principal é definido na vertical. Os itens são empilhados verticalmente, ocupando a altura do container em vez de sua largura. Cada item se ajusta para ocupar a altura máxima disponível.

Propriedades de Direção com Ordenamento Inverso:

  • flex-direction: row-reverse;

    • Semelhante ao row, mas com a ordem dos itens flexíveis invertida. O último item ficará na primeira posição, e assim por diante.

  • flex-direction: column-reverse;

    • Semelhante ao column, mas com a ordem dos itens flexíveis invertida. O último item ficará no topo da pilha, enquanto os itens anteriores serão organizados a partir de baixo.

Uso

  • Código: 
/* Modulo 1/4 flex direction/flex-direction.html */ .direction-row, .direction-column{ display: flex; background-color: #85d0bc; border: 1px solid #028082; width: 30%; padding: 1%; margin: 0 auto; color: #028082; } .direction-column{ flex-direction: column; margin-bottom: 2em; } .direction-row{ flex-direction: row; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado: no primeiro é o column no segundo é o row

🔗 Resource: https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/4%20flex%20direction/flex-direction.html

Flex Wrap

O flex-wrap é uma propriedade do CSS que define se os itens dentro de um container flexível devem "quebrar" para uma nova linha ou coluna quando o espaço disponível não for suficiente. Isso impede que os itens preencham a largura ou altura do container, permitindo que eles se reorganizem de forma mais flexível.

Propriedades de Flex Wrap:

  • flex-wrap: wrap;

    • Esta propriedade define que os itens podem quebrar e criar novas linhas ou colunas, respeitando seus valores originais de largura ou altura. Os itens serão distribuídos para ocupar as novas linhas ou colunas conforme necessário.

  • flex-wrap: wrap-reverse;

    • Semelhante ao wrap, mas a ordem dos itens será invertida ao quebrar a linha. Ou seja, os itens serão organizados de forma reversa nas novas linhas ou colunas.

  • flex-wrap: nowrap;

    • Quando essa propriedade é utilizada, o wrap não acontece. Os itens são forçados a permanecer em uma única linha ou coluna, e o conteúdo pode transbordar do container se não houver espaço suficiente.

Nota: Se os itens não couberem, o conteúdo transbordará do container flexível.

Observação: Quando o wrap é utilizado e o eixo principal está na horizontal, os itens irão quebrar na direção horizontal. Se o eixo estiver na vertical, a quebra ocorrerá na direção vertical.

Uso

  • Código: 
/* Modulo 1/5 flex-wrap/flex-wrap.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; flex-direction: row; width: 30%; height: 600px; padding: 1%; margin: 0 auto; color: #028082; } .item { background-color: #cdf6eb; border: 1px solid #028082; width: 100px; height: 200px; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

🔗 Resource: https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/5%20%20flex-wrap/flex-wrap.html

Justify Content

O justify-content é uma propriedade do CSS que alinha os itens dentro de um container flexível ao longo do eixo principal. Em alguns casos, é necessário utilizar o flex-wrap em conjunto para que os itens possam ser movidos na horizontal (ou vertical, dependendo da direção do eixo).

Valores:

  • justify-content: center;

    • Alinha os itens flexíveis no centro do container, distribuindo o espaço igualmente ao redor deles.

  • justify-content: flex-start;

    • Alinha os itens flexíveis no início do container, com o espaço restante sendo distribuído após o último item.

  • justify-content: flex-end;

    • Alinha os itens flexíveis no final do container, com o espaço restante antes do primeiro item.

  • justify-content: space-between;

    • Distribui os itens flexíveis de modo que o espaço entre eles seja igual, mas não há espaço extra nas extremidades do container.

  • justify-content: space-around;

    • Coloca um espaço igual ao redor de cada item flexível, incluindo as extremidades do container.

  • justify-content: space-evenly;

    • Tenta distribuir o espaço de maneira igual entre os itens e ao redor deles, incluindo as extremidades.

Nota: Quando o flex-direction está definido como column, a orientação do justify-content muda devido ao eixo principal ser vertical, enquanto em row ele é horizontal.

Uso

  • Código: 
/* Modulo 1/6 justify-content/justify-content.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 30%; height: 600px; margin: 0 auto; color: #028082; } .item { background-color: #cdf6eb; border: 1px solid #028082; width: 100px; height: 200px; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

🔗 Resource: https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/6%20%20justify-content/justify-content.html

Align Items

A propriedade align-items do CSS é responsável por alinhar os itens dentro de um container flexível no eixo transversal, ou seja, no eixo vertical quando o flex-direction está configurado para row (horizontal) ou no eixo horizontal quando o flex-direction está configurado para column (vertical).

Valores:

  • align-items: stretch;

    • Este é o valor padrão. Faz com que os itens flexíveis se estiquem para ocupar toda a altura (ou largura, dependendo da direção do eixo) do container.

  • align-items: center;

    • Alinha os itens flexíveis no centro do container ao longo do eixo transversal (vertical ou horizontal, dependendo da direção do eixo principal).

  • align-items: flex-start;

    • Alinha os itens no início do eixo transversal, ou seja, no topo do container (se o eixo principal for horizontal) ou à esquerda (se o eixo principal for vertical).

  • align-items: flex-end;

    • Alinha os itens no final do eixo transversal, ou seja, na parte inferior do container (se o eixo principal for horizontal) ou à direita (se o eixo principal for vertical).

  • align-items: baseline;

    • Alinha os itens flexíveis com base na linha de base do texto dentro de cada item, permitindo que o alinhamento seja feito de acordo com a linha de base de seus conteúdos.

Uso

  • Código: 
/* Modulo 1/7 align-items/align-items.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: baseline; width: 30%; height: 600px; margin: 0 auto; color: #028082; } .item { background-color: #cdf6eb; border: 1px solid #028082; width: 100px; height: 70px; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

🔗 Resource:https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/7%20%20align-items/align-items.html

Flex Grow

A propriedade flex-grow define o fator de crescimento dos itens dentro de um container flexível. Seu valor padrão é 0, o que significa que, por padrão, os itens não crescem para ocupar o espaço disponível. O flex-grow recebe apenas valores numéricos.

Como funciona:

O fator de crescimento é calculado usando a seguinte fórmula:

  • Unidade de Crescimento = Espaço disponível / Somatória de todos os fatores de crescimento

  • Espaço disponível = Largura do flex-container - Soma das larguras dos flex-items

Depois de calcular a unidade de crescimento, ela é somada à largura do item flexível, fazendo com que ele se expanda para preencher o espaço restante no container.

Uso

  • Código: 
/* Modulo 1/9 flex-grow/flex-grow.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; width: 1000px; height: 400px; margin: 0 auto; color: #028082; } .item { background-color: #cdf6eb; width: 150px; height: 70px; display: flex; justify-content: center; align-items: center; } .item:nth-child(even) { background-color: #a4ddce; } .item:nth-child(2){ flex-grow: 4; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

🔗 Resource: https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/9%20%20flex-grow/flex-grow.html

Flex Shrink

A propriedade flex-shrink faz o inverso do flex-grow, determinando o fator de encolhimento dos itens flexíveis dentro de um container. Seu valor padrão é 1, o que significa que, por padrão, os itens podem encolher até a largura do flex-container, se necessário.

Como funciona:

O fator de encolhimento é calculado usando a mesma fórmula do flex-grow:

  • Unidade de Encolhimento = Espaço disponível / Somatória de todos os fatores de encolhimento

  • Espaço disponível = Largura do flex-container - Soma das larguras dos flex-items

A unidade de encolhimento é aplicada para fazer com que os itens se encolham proporcionalmente para ajustar o layout ao tamanho disponível do container.

Uso

  • Código: 
/* Modulo 1/10 flex-shrink/flex-shrink.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; width: 500px; height: 400px; margin: 0 auto; color: #028082; } .item { background-color: #cdf6eb; width: 200px; height: 70px; display: flex; justify-content: center; align-items: center; } .item:nth-child(even) { background-color: #a4ddce; flex-shrink: 6; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

🔗 Resource: https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/10%20%20flex-shrink/flex-shrink.html

Flex Basis

A propriedade flex-basis define a dimensão inicial de um item flexível, que pode ser a largura ou a altura, dependendo da direção do eixo. Quando a direção do eixo está na horizontal, a dimensão alterada é a largura; quando está na vertical, a dimensão alterada é a altura.

Detalhes:

  • Unidades de medida: O valor de flex-basis é definido utilizando unidades de medida, como pixels, porcentagens, entre outras.

  • Valor padrão: O valor padrão de flex-basis é auto. Quando configurado como auto, a dimensão do item será equivalente ao tamanho do flex-container.

  • Valor zero: Quando flex-basis é definido como zero, o item não ocupará nenhuma dimensão inicial, a menos que tenha uma propriedade de flex-grow ou uma largura já definida.

  • Conteúdo maior: Se o conteúdo de um item for maior que a dimensão definida em flex-basis, o item não terá a dimensão definida e se ajustará ao tamanho do conteúdo.

  • Interação com width e height: Quando flex-basis é definido com um valor maior que zero, as propriedades width e height não terão efeito. Para que isso ocorra, o valor de flex-basis deve ser maior que zero.

  • Limitações com min-width e max-width: Você pode restringir o comportamento de flex-basis com as propriedades min-width, max-width, min-height e max-height. O flex-grow, flex-shrink e flex-basis usarão esses limites como referência.

  • Uso com wrap: Quando flex-basis é utilizado juntamente com o wrap, se um item não couber na mesma linha que os outros, ele será quebrado e ajustado para caber na nova linha.

Uso

flex-basis-largura-altura

  • Código: 
/* Modulo 1/11 flex-basis/11.1 flex-basis-largura-altura/flex-basis-largura-altura.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; width: 550px; height: 400px; margin: 0 auto; color: #028082; overflow: hidden; border-radius: 12%; } .item { display: flex; justify-content: center; align-items: center; background-color: #cdf6eb; box-shadow: 0 0 12rem #fff; height: 150px; border-radius: 5%; margin-top: 20%; margin-right: 4px; flex-basis: 250px; flex-shrink: 0; animation: rotateItem 6s infinite; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

flex-basis-auto

  • Código: 
/* Modulo 1/11 flex-basis/11.2 flex-basis-auto/flex-basis-auto.html */ .container { display: flex; flex-direction: column; background-color: #85d0bc; border: 1px solid #028082; width: 500px; height: 400px; margin: 0 auto; color: #028082; } .item { background-color: #cdf6eb; height: 70px; display: flex; justify-content: center; align-items: center; flex-basis: auto; } .item:nth-child(even) { flex-grow: 1; background-color: #a4ddce; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

🔗 Resource: https://github.com/mrpunkdasilva/CSS-Flex-Box/tree/master/Modulo%201/11%20flex-basis

flex-basis-zero

  • Código: 
/* Modulo 1/11 flex-basis/11.3 flex-basis-zero/flex-basis-zero.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; width: 500px; height: 400px; margin: 0 auto; color: #028082; } .item { background-color: #cdf6eb; height: 70px; display: flex; justify-content: center; align-items: center; flex-grow: 1; } .item:nth-child(even) { background-color: #a4ddce; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

flex-basis-conteúdo-maior

  • Código: 
/* Modulo 1/11 flex-basis/11.4 flex-basis-conteúdo-maior/flex-basis-conteúdo-maior.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; width: 1000px; height: 400px; margin: 0 auto; color: #028082; } .item { background-color: #cdf6eb; height: 70px; display: flex; justify-content: center; align-items: center; text-align: center; flex-basis: 1200px; } .item:nth-child(even) { background-color: #a4ddce; } .item:nth-child(1) { flex-basis: auto; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

flex-basis-conteúdo-width-height

  • Código: 
/* Modulo 1/11 flex-basis/11.5 flex-basis-conteúdo-width-height/flex-basis-conteúdo-width-height.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; width: 500px; height: 400px; margin: 0 auto; color: #028082; flex-direction: row; } .item { background-color: #cdf6eb; height: 70px; width: 100px; display: flex; justify-content: center; align-items: center; text-align: center; flex-basis: 200px; } .item:nth-child(even) { background-color: #a4ddce; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

flex-basis-min-width

  • Código: 
/* Modulo 1/11 flex-basis/11.6 flex-basis-min-width/flex-basis-min-width.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; width: 500px; height: 400px; margin: 0 auto; color: #028082; } .item { background-color: #cdf6eb; height: 70px; display: flex; justify-content: center; align-items: center; text-align: center; flex-basis: 90px; min-width: 100px; flex-grow: 0; } .item:nth-child(even) { background-color: #a4ddce; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

flex-basis-max-width

  • Código: 
/* Modulo 1/11 flex-basis/11.7 flex-basis-max-width/flex-basis-max-width.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; width: 600px; height: 400px; margin: 0 auto; color: #028082; } .item { background-color: #cdf6eb; height: 70px; display: flex; justify-content: center; align-items: center; text-align: center; flex-basis: 30%; flex-shrink: 0; } .item:nth-child(even) { background-color: #a4ddce; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:
    • Adivinhe porque o item estourou o componente pai

flex-basis-wrap

  • Código: 
/* Modulo 1/11 flex-basis/11.8 flex-basis-wrap/flex-basis-wrap.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; width: 400px; height: 160px; margin: 0 auto; color: #028082; flex-wrap: wrap; } .item { background-color: #cdf6eb; height: 70px; display: flex; justify-content: center; align-items: center; flex-basis: 200px; flex-grow: 1 } background-color: #a4ddce; .item:nth-child(even) { }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

🔗 Resource de todos os exemplos deste tópico: https://github.com/mrpunkdasilva/CSS-Flex-Box/tree/master/Modulo%201/11%20flex-basis

Propriedade Flex

A propriedade flex é uma forma simplificada de declarar outras propriedades do Flexbox, como flex-grow, flex-shrink e flex-basis. Ela combina as três em uma única declaração.

Valor padrão:

  • flex: 0 1 auto;

Sintaxe:

  • flex: <flex-grow> <flex-shrink> <flex-basis>;

Detalhes:

  • Quando um número é especificado na propriedade flex, ele assume as seguintes significações:
    • O número especificado corresponde ao valor de flex-grow.
    • flex-shrink será igual a 1.
    • flex-basis será igual a 0.

Essa abordagem simplifica o uso do Flexbox, permitindo a declaração compacta de propriedades comuns em um único valor.

Uso

flex-valor-padrão

  • Código: 
/* Modulo 1/12 flex/12.1 flex-valor-padrão/flex-valor-padrão.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; width: 500px; height: 400px; margin: 0 auto; color: #028082; } .item { background-color: #cdf6eb; height: 70px; display: flex; justify-content: center; align-items: center; flex: 0 2 100px; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado: ![[Flexbox Sem Frescura-ex17.png]]

 flex-valor-flexivel-inflexivel

  • Código: 
/* Modulo 1/12 flex/12.2 flex-valor-flexivel-inflexivel/flex-valor-flexivel-inflexivel.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; width: 500px; height: 400px; margin: 0 auto; color: #028082; } .item { background-color: #cdf6eb; height: 70px; display: flex; justify-content: center; align-items: center; flex: auto; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

 flex-valor-zero

  • Código: 
/* Modulo 1/12 flex/12.3 flex-valor-zero/flex-valor-zero.html */ .container { display: flex; background-color: #85d0bc; border: 1px solid #028082; width: 500px; height: 400px; margin: 0 auto; color: #028082; } .item { background-color: #cdf6eb; height: 70px; display: flex; justify-content: center; align-items: center; flex: 1; } .item:nth-child(even) { background-color: #a4ddce; } .item:nth-child(3) { flex: 2; } .item:nth-child(4) { flex: 0; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

🔗 Resource: https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/12%20flex/

Propriedade Order

A propriedade order define a ordem em que os elementos (itens flexíveis) serão exibidos, mas não altera a ordem no HTML. Ela afeta apenas a disposição visual dos elementos.

Detalhes:

  • A order pode ser usada com qualquer valor numérico, onde a ordem visual dos itens será ajustada de acordo com o valor atribuído.

  • O comportamento da order é o mesmo independentemente da direção (row ou column).

Regras de ordenação:

  • Números negativos aparecem antes de 0 e de números positivos.
  • O número 0 aparece antes dos números negativos e depois dos números positivos.
  • Números positivos aparecem depois de 0 e dos números negativos.

Uso

  • Código: 
/* Modulo 1/13 order/order.html */ .item { background-color: #cdf6eb; display: flex; justify-content: center; align-items: center; text-align: center; flex: 1 1 auto; margin: 4px 8px; } .order_menosUm { order: -1; } .order { order: 0; } .order_1 { order: 1; } .order_2 { order: 2; } .order_3 { order: 3; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

🔗 Resource: https://github.com/mrpunkdasilva/CSS-Flex-Box/blob/master/Modulo%201/13%20order/order.html

Align Self

A propriedade align-self permite alterar o alinhamento de um único item dentro de um container flexível, funcionando da mesma forma que align-items, mas aplicando-se apenas a um item específico.

Valor padrão:

  • auto: O item segue o valor de align-items do container.

Valores:

  • align-self: stretch;

    • Valor padrão. Estica o item para preencher o espaço disponível no eixo transversal.

  • align-self: center;

    • Alinha o item no centro do eixo transversal (vertical ou horizontal, dependendo da direção do eixo principal).

  • align-self: flex-start;

    • Alinha o item no início do eixo transversal.

  • align-self: flex-end;

    • Alinha o item no final do eixo transversal.

  • align-self: baseline;

    • Alinha o item com base na linha de base da tipografia dentro do item.

Uso

align-self-eixo-principal

  • Código: 
/* Modulo 1/14 align-self/14.1 align-self-eixo-principal/align-self-eixo-principal.html */ .item { background-color: #cdf6eb; display: flex; justify-content: center; align-items: center; text-align: center; flex: 1 1 auto; } .item:nth-child(even) { background-color: #a4ddce; } .stretch { align-self: stretch; } .flex-start{ align-self: flex-start; } .flex-end{ align-self: flex-end; } .center{ align-self: center; } .baseline{ align-self: baseline; font-size: 5em; } .baseline-2{ align-self: baseline; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

align-self-eixo-transversal

  • Código: 
/* Modulo 1/14 align-self/14.2 align-self-eixo-transversal/align-self-eixo-transversal.html */ .item { background-color: #cdf6eb; display: flex; justify-content: center; align-items: center; text-align: center; flex: 1 1 auto; } .item:nth-child(even) { background-color: #a4ddce; } .stretch { align-self: stretch; } .flex-start { align-self: flex-start; } .flex-end { align-self: flex-end; } .center { align-self: center; } .baseline { align-self: baseline; }
Enter fullscreen mode Exit fullscreen mode
  • Resultado:

🔗 Resource de todos esses exemplos deste tópico: https://github.com/mrpunkdasilva/CSS-Flex-Box/tree/master/Modulo%201/14%20align-self

Nota do autor

Espero que seja útil e recomendo usar como se fosse uma "colinha", já que é normal esquecermos os nomes ou funções, somente praticando acaba ficando enraizado na nossa massa cinzenta.

Alguns jogos para praticar e aprender flexbox:

Documentação oficialísima, para quando o cuzinho apertar e nada na internet você achar: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox

Olhando mais adiante da pica reta do horizonte cofira os links para ver sobre Layout Grid, que é um dos principais modelos de layout usadas:

Top comments (0)